:root {
    --head: #081d38;
    --bg: #0a121c;
    --bg1: #1a2838;
    --bg2: #2d3a4a;
    --bg3: #3e4c5c;
    --bg4: #5f6d7d;
    --bg5: #8f9bae;
    --bg6: #bfc7d4;
    --text: #e0e4eb;
    --text-active: #bfc7d4;
    --main-blue: #0d3769;
    --main-blue2: #1a4a8a;
    --main-yellow2: #ffdf40;
    --main-yellow: #FDC608;
    --warning: #f57c7c;

    --font1: 9px;
    --font2: 10px;
    --font3: 14px;
    --font4: 16px;
    --font5: 20px;
    --font6: 28px;

    --scrollbar-width: 4px;
}
[data-theme="light"] {
    --head: #bfc7d4;
    --bg: #e0e4eb;
    --bg1: #bfc7d4;
    --bg2: #8f9bae;
    --bg3: #5f6d7d;
    --bg4: #3e4c5c;
    --bg5: #2d3a4a;
    --bg6: #1a2838;
    --text: #0a121c;
    --text-active: #1a2838;
    --main-blue: #ffdf40;
    --main-blue2: #FDC608;
    --main-yellow2: #0d3769;
    --main-yellow: #1a4a8a;
    --warning: #b70b0b;
}
[data-theme="dark"] .themeswitch span[data-theme="dark"] {
    display: none;
}
[data-theme="light"] .themeswitch span[data-theme="light"] {
    display: none;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    font-family: Kanit;
    font-weight: 500;
}
html, body {
    height: 100%;
}
body {
    width: 100%;
    margin: 0 auto;
    background-color: var(--bg);
    overflow-x: hidden!important;
}
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    border-radius: 4px;
}
::-webkit-scrollbar:horizontal {
    height: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb {
    background: var(--main-yellow);
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    border-radius: 4px;
}
body:has(dialog[open]) {
    overflow: hidden !important;
}
body:has(dialog[open]) a.dlc {
    margin-right: var(--scrollbar-width);
}
body:has(dialog[open]) .toast-msg {
    transform: translateX(calc(var(--scrollbar-width) * -1));
}
dialog {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    overflow-x: hidden;
    background: none;
    align-items: center;
    padding: 8px;
    animation: closeDialog 300ms forwards;
}
dialog[open] {
    display: flex;
    animation: openDialog 300ms forwards;
}
@keyframes openDialog {
    0% { top: -100%; opacity: 0; }
    100% { top: 0; opacity: 1; }
}
@keyframes closeDialog {
    0% { top: 0; opacity: 1; }
    100% { top: -100%; opacity: 0; }
}
@keyframes openDialogFromSide {
    0% { left: 100%; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
@keyframes closeDialogFromSide {
    0% { left: 0; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
dialog.lg .dialog-content {
    max-width: 800px;
}
dialog.xl .dialog-content {
    max-width: 1200px;
}
dialog::backdrop {
    backdrop-filter: blur(0.5px);
    background: rgba(0, 0, 0, .25);
}
dialog .dialog-content {
    max-width: 500px;
    width: 100%;
    background-color: var(--bg1);
    color: var(--text);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    margin: auto;
    overflow: hidden auto;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
}
dialog .dialog-content::-webkit-scrollbar {
    display: none;
}
dialog.scrollable .dialog-content {
    max-height: 100%;
    overflow: hidden;
}
dialog.scrollable .dialog-content .dialog-body {
    overflow-y: auto;
}
dialog .dialog-header {
    min-height: 64px;
    width: 100%;
    padding: 16px;
    position: relative;
    display: flex;
}
dialog .dialog-header:has(.dialog-title) {
    min-height: unset;
}
dialog .dialog-header .dialog-closer {
    margin: 0 0 auto auto;
    background: var(--bg2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
    cursor: pointer;
    border: none;
    outline: none;
}
.modalHeader button.svg-border-light {
    border: none;
    outline: none;
}
dialog .dialog-header .dialog-closer svg, .modalHeader button.svg-border-light svg {
    fill: var(--text);
    background: none;
}
dialog .dialog-header .dialog-title {
    width: calc(100% - 32px);
    text-align: center;
    margin: 0;
    padding-left: 32px;
    font-size: var(--font6);
}
dialog .dialog-footer {
    width: 100%;
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}
dialog .dialog-body {
    flex: 1 1 auto;
    padding: 0 16px 16px;
}
dialog .dialog-content:has(.dialog-footer) .dialog-body {
    padding-bottom: 0;
}
dialog .dialog-body:has(.terms) {
    text-align: left !important;
    padding: 0 16px;
}
#popupDialog .dialog-body {
    text-align: center;
}
#promoDetailsModal .dialog-body {
    padding: 0 16px 16px;
}
dialog#accModal {
    justify-content: center;
}
dialog#accModal .dialog-content {
    height: 100%;
    max-height: 90%;
    max-width: 1140px;
    background: var(--bg1);
    overflow: hidden;
}
dialog#accModal .dialog-body {
    overflow: hidden;
}
[popover]:popover-open {
    display: block;
}
.toast-msg.temp {
    display: none !important;
}
.toast-msg {
    z-index: 99999;
    background-color: var(--bg1);
    color: var(--text);
    width: 200px;
    border-radius: 4px;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    font-size: var(--font3);
    border: none;
    opacity: 0;
    display: block;
    position: fixed;
    animation: closeToast 300ms forwards;
}
.toast-msg:popover-open {
    animation: openToast 300ms forwards;
}
@keyframes openToast {
    0% { left: 100%; opacity: 0; }
    100% { left: calc(100% - 216px); opacity: 1; }
}
@keyframes closeToast {
    0% { left: calc(100% - 216px); opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.toast-body {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    width: 100%;
}
.toast-content {
    width: 100%;
    max-width: calc(100% - 16px);
}
.toast-closer {
    fill: var(--text);
    cursor: pointer;
}
.toast-loader {
    width: 100%;
    height: 2px;
    position: relative;
    overflow: hidden;
    background: var(--main-yellow);
    opacity: 0.8;
}
.toast-loader-bar {
    --delay: 10s;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--bg1);
    animation: growBar var(--delay) linear forwards;
}
@keyframes growBar {
    from { width: 0; }
    to { width: 100%; }
}
.input-group {
    position: relative;
    margin-bottom: 16px;
}
.input-group-title {
    color: var(--text);
    font-size: var(--font4);
    font-weight: 400;
    margin: 16px 0;
}
.input-group + .input-group-title {
    margin-top: 32px;
}
.input-group input, .input-group select {
    border: 1px solid var(--bg3);
    background: var(--bg1);
    color: var(--text);
    font-size: var(--font4);
    font-weight: 400;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 16px;
    width: 100%;
    appearance: initial;
    -webkit-appearance: initial;
    height: 40px;
}
.input-group svg ~ input, .input-group svg ~ select {
    padding-left: 48px;
}
.input-group select option {
    background: var(--bg1);
    color: var(--text);
    cursor: pointer;
}
.input-group .col .select-arrow, .input-group .col svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    fill: var(--text);
}
.input-group .col svg {
    left: 12px;
}
.input-group .col svg ~ input, .input-group .col svg ~ select {
    padding-left: 48px;
}
.input-group select ~ .select-arrow {
    left: unset;
    right: 12px;
}
.input-group:has(.showPwd) input {
    padding-right: 48px;
}
.showPwd, .user-limit-delete {
    position: absolute;
    display: grid;
    place-content: center;
    right: 0;
    height: 100%;
    aspect-ratio: 1;
    cursor: pointer;
    z-index: 10;
}
.showPwd svg {
    fill: var(--text);
}
.input-group label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bg6);
    font-size: var(--font4);
    font-weight: 400;
    line-height: 1;
    transition: 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
    margin: 0;
}
.input-group > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    fill: var(--text);
}
.input-group svg ~ label, .input-group .col svg ~ label{
    left: 48px;
}
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group select:valid ~ label,
.input-group select:disabled ~ label,
label[for="myAccountInputPhone"],
label[for="phone"],
label[for="registerInputPhone"],
label[for="fpphone"] {
    background: var(--bg1);
    padding: 0 6px;
    top: 0;
    transform: translate(0, -6px);
    font-size: 12px;
}
.input-group svg ~ input:focus ~ label,
.input-group svg ~ input:not(:placeholder-shown) ~ label,
.input-group svg ~ select:valid ~ label {
    transform: translate(-36px, -6px);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    display: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    -webkit-transition: background 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--bg6) !important;
    -webkit-box-shadow: 0 0 0 42px var(--bg1) inset !important;
}
.input-group-button button {
    width: 90%;
    margin: 0 auto;
    text-transform: capitalize;
}
.input-warning, .input-information {
    font-size: 11px;
    font-weight: 400;
    display: none;
}
.input-warning {
    color: var(--warning);
}
.input-warning > * {
    display: none;
}
.input-warning > .show {
    display: block;
}
.input-information {
    color: var(--text);
}
.input-group.invalid + .input-warning,
.input-group:has(input[type="checkbox"]:user-invalid) + .input-warning,
.input-group:has(input[type="checkbox"].invalid) + .input-warning,
.input-group.tab.active.invalid + .input-warning {
    display: block;
    margin-bottom: 16px;
}
.password-strength {
    display: none;
    flex-direction: column;
}
.password-strength .input-information {
    display: block;
}
.input-group.has-strength ~ .password-strength {
    display: flex;
}
.input-group.tab, .input-group.tab + .input-warning, .input-group.tab.invalid + .input-warning {
    display: none;
}
.input-group.tab.active {
    display: flex;
}
.categories {
    scrollbar-width: auto !important;
    border-radius: 0 !important;
}
.categories::-webkit-scrollbar {
    display: block;
}
.categories a:hover, .categories a.active {
    background-color: var(--bg2);
    color: var(--text);
}
.categories a {
    color: var(--text);
    font-size: 18px;
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
}
.categories a:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
}
[data-checked="0"] svg use.checked, [data-checked="1"] svg use {
    display: none;
}
[data-checked="1"] svg use.checked {
    display: block;
}
.gameproviders {
    background: var(--bg1);
    max-height: 320px;
    margin: 0;
    padding: 0.5rem;
}
.gpItem {
    background: var(--bg1);
    padding: 2px 8px;
    margin: 2px;
    text-decoration: none;
    font-weight: 400;
    color: var(--main-yellow);
    height: 34px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border: solid 1px var(--main-yellow);
    border-radius: 16px;
}
.gpItem svg {
    fill: var(--main-yellow);
}
.gpItem p {
    margin: 0;
}
.gpItem span {
    margin-left: auto;
}
.gpItem:hover {
    color: var(--bg);
    background: var(--main-yellow);
}
.gpItem:hover svg {
    fill: var(--bg);
}
@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 1040px){}
@media (min-width: 140px){}
@media (orientation: landscape){}
@media (orientation: portrait){}
@media (prefers-reduced-motion: reduce){}

/* LEGACY CSS */

.wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.wrapper > section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main_button, .sec_button {
    border: 0; outline: 0;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    padding: 4px 16px;
    letter-spacing: 0.2px;
    font-size: var(--font3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.main_button, [data-theme="light"] .landing-title .sec_button {
    background-color: var(--main-yellow);
    color: var(--bg);
}
[data-theme="light"] .landing-title .sec_button svg, [data-theme="light"] .landing-title .sec_button:hover svg, [data-theme="light"] .main_button svg, [data-theme="light"] .main_button:hover svg {
    fill: var(--bg);
}
[data-theme="light"] .landing-title .sec_button:hover {
    background-color: var(--main-yellow2);
    color: var(--bg);
}

[data-theme="light"] .primary-btn {
    background-color: var(--main-blue);
    color: #0a121c !important;
}
[data-theme="light"] .primary-btn:hover,
[data-theme="light"] .primary-btn:active,
[data-theme="light"] .primary-btn:focus {
    background-color: var(--main-blue2);
}
[data-theme="light"] .tertiary-btn {
    background-color: var(--main-yellow);
    color: #e0e4eb !important;
}
[data-theme="light"] .tertiary-btn:hover,
[data-theme="light"] .tertiary-btn:active,
[data-theme="light"] .tertiary-btn:focus {
    background-color: var(--main-yellow2);
}
[data-theme="light"] .game-detail-list .col {
    background: var(--main-yellow2);
    color: var(--bg);
}
[data-theme="light"] .game-detail-list .col.text-right {
    border-color: var(--main-yellow2);
}
.main_button svg {
    fill: black;
}
.sec_button {
    background-color: transparent;
    color: var(--main-yellow);
    border: 1px solid var(--main-yellow);
}
.sec_button svg {
    fill: var(--main-yellow);
}
.main_button:disabled,
.main_button.disabled,
.sec_button:disabled,
.sec_button.disabled,
.primary-btn.disabled,
.primary-btn:disabled {
    background: var(--bg4) !important;
    color: var(--bg1) !important;
    pointer-events: none;
}
.main_button::after, .sec_button::after {
  display: none;
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  animation: ripple 1s;
  opacity: 0;
}
.main_button:hover, .main_button:active, .main_button:focus {
    background: var(--main-yellow2) !important;
    outline: none;
}
.sec_button:hover, .sec_button:active, .sec_button:focus {
    border-color: var(--main-yellow2);
    color: var(--main-yellow2);
    outline: none;
}
.sec_button:hover svg {
    fill: var(--main-yellow2);
}
.main_button:focus:not(:active)::after, .sec_button:focus:not(:active)::after {
  display: block;
}
.main_header_user .main_button, .main_header_user .sec_button {
    padding: 4px 24px;
    line-height: 20px;
}
.main_header_user .main_button {
    background: var(--main-yellow);
}
#veriff-submit-btn {
    font-size: var(--font4);
    font-weight: 500;
    margin-top: 32px;
    width: 100%;
    text-transform: unset;
}
#veriff-root {
    margin: 0 auto;
}
#selfidentification p {
    font-size: var(--font4);
    font-weight: 400;
    color: var(--text);
    margin: 0;
}
#selfidentification p:first-of-type {
    margin-bottom: 8px;
}
#selfidentification ul {
    color: var(--text);
    margin: 32px!important;
}
#CopyRefButton svg {
    fill: var(--bg);
}
#modalDescriptionBody > div, #modalDescriptionBody table {
    color: var(--text) !important;
}
.main_header_menu svg {
    fill: var(--text);
}
.countBadge {
    position: relative;
}
.countBadge[data-count="0"]::after {
    display: none;
}
.countBadge::after {
    content: attr(data-count);
    color: white;
    font-weight: 600;
    width: 16px;
    height: 16px;
    font-size: 12px;
    background: red;
    border-radius: 50%;
    position: absolute;
    bottom: -8px;
    right: -8px;
    display: grid;
    place-content: center;
}
#chprov-count.countBadge::after{
    bottom: -5px;
    right: -5px;
}
.iti__country-list {
    background-color: var(--bg1) !important;
    color: var(--text) !important;
}
.smartico-widget {
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    gap: 16px;
    cursor: pointer;
}
.smartico-boxes {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}
.smartico-tour {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    fill: var(--main-yellow);
}
.smartico-tour span {
    color: var(--main-yellow) !important;
    font-size: 12px;
}
.smartico-notification {
    position: relative;
    font-weight: 400;
}
.smartico-notification[data-count="0"]::after {
    display: none;
}
.smartico-notification::after {
    content: attr(data-count);
    font-size: var(--font2);
    font-weight: 500;
    line-height: 1;
    color: var(--bg);
    background: var(--main-yellow);
    padding: 2px 4px;
    min-width: 14px;
    border-radius: 14px;
    position: absolute;
    top: -8px;
    left: -8px;
    display: grid;
    place-content: center;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.smartico-msg.smartico-notification::after {
    top: 4px;
    left: 20px;
}
.float-menu .smartico-widget {
    padding: 8px 24px 24px;
    gap: 8px;
}
.float-menu .smartico-boxes {
    color: var(--text);
}
.smartico-box {
    display: flex;
    align-items: center;
    gap: 8px;
}
.smartico-details {
    display: flex;
    flex-direction: column;
    justify-content: start;
}
.smartico-box span {
    font-size: var(--font2);
    font-weight: 500;
    line-height: 12px;
}
span.smartico-coins, span.smartico-points, span.smartico-grade {
    font-size: var(--font5);
    font-weight: 600;
    line-height: 22px;
}
.smartico-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    cursor: pointer;
}
.smartico-container span {
    color: var(--main-yellow);
    font-size: var(--font3);
    line-height: 20px;
}
.smartico-container:hover span {
    color: var(--main-yellow2);
}
.smartico-grade-image,
.smartico-grade-image.show + svg,
.smartico-avatar,
.smartico-avatar.show + svg {
    display: none;
}
.smartico-grade-image.show, .smartico-avatar.show {
    display: block;
}
.smartico-box svg {
    fill: var(--main-yellow);
}
.carousel-container {
    position: relative;
    padding: 16px;
}
.main-carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 140px;
    border-radius: 16px;
    aspect-ratio: 960 / 400;
    max-height: 400px;
}
.main-slider {
    counter-reset: count;
    position: absolute;
    z-index: 1;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    cursor: grab;
    touch-action: pan-x;
}
.main-slider.dragging {
    cursor: grabbing;
    touch-action: none;
}
.main-slider.dragging > * {
    user-select: none;
}
.main-slider::-webkit-scrollbar {
    display: none;
}
.carousel-container.single-cell {
    padding: 16px;
}
.carousel-container.single-cell .carousel-cell {
    max-width: 960px;
    width: 100%;
    transform: translateX(-50%);
    left: 50%;
}
.carousel-container.single-cell .main-carousel {
    aspect-ratio: 960 / 400 !important;
}
.carousel-container.single-cell .main-pagination {
    display: none;
}
.carousel-container.single-cell .main-slider {
    cursor: default;
    justify-content: center;
}
.carousel-container.double-cell .carousel-cell:not(:first-child),
.carousel-container.triple-cell .carousel-cell:not(:first-child) {
    display: none;
}
.carousel-container.loaded .carousel-cell {
    display: block !important;
}
.main-slider > .carousel-cell {
    counter-increment: count;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 140px;
    aspect-ratio: 960 / 400;
    overflow: hidden;
}
.main-slider > .carousel-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}
.main-pagination {
    position: absolute;
    bottom: 16px;
    left: 50%;
    translate: -50%;
    display: none;
    gap: 0.2rem;
}
.main-pagination .dot {
    width: 12px;
    height: 2px;
    background: var(--bg5);
    border-radius: 2px;
    cursor: pointer;
    transition: width 0.5s ease-out;
}
.main-pagination .dot.active {
    background: var(--text);
    width: 24px;
}
button {
    cursor: pointer;
}
.select-items {
    scrollbar-width: thin;
}
.menu-desktop, .segmented-border, .slider-img-box, .table td, .table th, .uep-tabs li {
    text-align: center;
}
.header .blink, .header .flip, .header .rotate {
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.header .blink, .header .flip, .header .rotate, .header .zoom {
    animation-iteration-count: infinite;
}
.gameName, .nav-logged-in-btn, .scrollmenu, .slide-track {
    white-space: nowrap;
}
#divGP {
    overflow-x: hidden;
}
.nav-logo {
    width: 100px;
    z-index: 100;
}
.nav-form {
    width: 460px;
    display: flex;
    align-items: center;
}
.gambling, .nav-toggler-img {
    width: 100px;
}
.nav-ul {
    width: 100%;
    justify-content: flex-start;
    overflow: hidden;
}
.navbar {
    border-top: 3px solid #ffd128;
    background-image: url("../images/menu_bg.png");
    background-size: cover;
    background-position: center;
    background-color: #0b0871;
    z-index: 99;
}
.icon-bar {
    width: 22px;
    height: 2px;
    background-color: #b6b6b6;
    display: block;
    transition: .2s;
    margin-top: 4px;
}
.navbar-toggler {
    border: none;
    background: 0 0!important;
}
.navbar-toggler .top-bar {
    transform: rotate(45deg) scaleX(1.375);
    width: 16px;
    margin-left: 3px;
    transform-origin: 10% 10%}
.navbar-toggler .middle-bar {
    transform: translate(22px);
    opacity: 0;
}
.navbar-toggler .bottom-bar {
    transform: rotate(-45deg) scaleX(1.375);
    width: 16px;
    margin-left: 3px;
    transform-origin: 10% 90%}
.navbar-toggler.collapsed .bottom-bar, .navbar-toggler.collapsed .top-bar {
    transform: scaleX(1) rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
    transform: translate(0);
    opacity: 1;
}
select#language {
    width: 60px;
    border: none;
    margin-right: 10px;
    cursor: pointer;
    color: #fff;
    background: #0b0871;
}
.beYellow, .menu-desktop a:hover {
    color: var(--main-yellow);
}
.custom-select select, .non-display, .only-for-mobile, .rotate, .select-hide {
    display: none;
}
.small-font {
    font-size: var(--font1);
}
.modal-body {
    padding-top: 0;
}
.menu-selected > svg, .menu-selected > span, .menu-selected > .countBadge > svg {
    fill: var(--main-yellow)!important;
    color: var(--main-yellow)!important;
    font-style: italic!important;
}
.menu-selected:active {
    background-color: transparent!important;
    border: 0!important;
}
.glow, .glow:hover {
    text-shadow: 1px 1px 20px #ff6857;
}
.langFontW {
    font-weight: 400;
}
.nav-bottom-border {
    width: 60px;
    height: 2px;
    border-radius: 15px;
    border: 2px solid #ffd128;
    margin-left: 40px;
}
.divider, .horizontal-line {
    border-top: 3px solid #9aabe8;
}
.divider {
    width: 60%;
    margin: auto;
}
.loader {
    /*border: .5rem solid #20318e;
    border-radius: 50%;
    border-top: .5rem solid #ffd128;
    width: 8rem;
    height: 8rem;
    -webkit-animation: 2s linear infinite spin;
    animation: 2s linear infinite spin;*/
}
@keyframes spin {
    0% {
    transform: rotate(0);
}
100% {
    transform: rotate(360deg);
}
}
.guest-btns {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 24px;
}
.guest-btns button {
    width: 100%;
    padding: 8px 24px;
    font-size: var(--font4);
}
.games-btn, .games-btn a {
    text-align: center;
}
.gamePlayBtn .primary-btn, .gamePlayBtn .tertiary-btn {
    width: 80%;
    margin: 0 auto 4px;
    padding: 4px 12px !important;
    line-height: 1.5;
    border: none !important;
}
#gameDetailsPlayGameButton, #gameDetailsPlayGameButtonDemo {
    padding: 8px 24px;
}
.primary-btn {
    position: relative;
    background-color: var(--main-yellow);
    color: #0a121c !important;
    padding: 8px 24px;
    box-shadow: none;
    border: none;
    outline: none !important;
    border-radius: 50px;
    font-weight: 400;
    overflow: hidden;
}
.secondary-btn {
    position: relative;
    background-color: var(--text);
    color: var(--bg);
    padding: 8px 24px;
    border-radius: 50px;
    outline: 0;
    border: none;
    overflow: hidden;
}
.tertiary-btn {
    position: relative;
    background-color: var(--main-blue);
    color: #e0e4eb !important;
    padding: 8px 24px;
    outline: 0;
    border: 0;
    border-radius: 50px;
    overflow: hidden;
}
.primary-btn:hover, .primary-btn:active, .primary-btn:focus {
    background-color: var(--main-yellow2);
}
.secondary-btn:hover, .secondary-btn:active, .secondary-btn:focus {
    background-color: var(--text-active);
}
.tertiary-btn:hover, .tertiary-btn:active, .tertiary-btn:focus {
    background-color: var(--main-blue2);
}
.primary-btn::after, .tertiary-btn::after, .secondary-btn::after {
  display: none;
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  top: 50%;
  left: 50%;
  animation: ripple 1s;
  opacity: 0;
}
.primary-btn:focus:not(:active)::after, .tertiary-btn:focus:not(:active)::after, .secondary-btn:focus:not(:active)::after {
  display: block;
}
@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(10);
  }
}
.checkmark, .markcheck {
    height: 16px;
    width: 16px;
    left: 0;
    top: 0;
}
.checkbox-container, .radio-container {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    cursor: pointer;
    font-size: var(--font3);
    font-weight: 400;
    margin: 0;
    color: var(--text);
}
.checkbox-container ~ a {
    font-size: var(--font3);
    color: var(--text);
    margin-left: 3px;
}
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    background: var(--bg1);
    border: 1px solid var(--text);
    border-radius: 50%;
}
.radio-container:hover input~.checkmark,
.radio-container input:checked~.checkmark {
    background-color: var(--main-blue2);
    border: 4px solid var(--text);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked~.markcheck:after, .radio-container input:checked~.checkmark:after {
    display: block;
}
.radio-container .checkmark:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: 0 0;
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    height: 100%;
}
.markcheck {
    border-radius: 4px;
    border: 1px solid var(--text);
}
.checkbox-container:hover input~.markcheck {
    background-color: transparent;
}
.checkbox-container input:checked~.markcheck {
    background: var(--text);
}
.checkbox-container input:checked~.markcheck:after {
    content: "";
    width: 6px;
    height: 10px;
    border: solid var(--bg1);
    border-width: 0 1px 1px 0;
    rotate: 45deg;
    translate: 4px 1px;
}
.segmented {
    border-bottom: 1px solid #adbff6;
}
.segmented-link:hover {
    color: #fff;
    font-weight: 700;
    border-bottom: 5px solid #ff0;
}
.sec-menu-arrow-left { transform: rotate(90deg); }
.sec-menu-arrow-right { transform: rotate(-90deg); }
#bBack, #bHead {
    height: 38px;
    border-color: #000;
    width: 30px;
}
.segmented-btn, .segmented-btn:active {
    background-color: transparent;
    border: none;
    color: #adbff6;
    font-weight: lighter;
    outline: 0;
    margin-bottom: -4px;
}
.uep-tabs li a {
    font-weight: 400;
}
.segmented-btn:focus {
    border: none;
    outline: 0;
    color: #adbff6;
    font-weight: 700;
}
.segmented-border {
    display: none;
    height: 4px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid #ffd128;
    background: #ffd128;
    border-radius: 5px;
    margin-bottom: -1px;
}
.modal-body, .modal-header, .noborder {
    border: 0;
}
.custom-select, .table th {
    position: relative;
    border: 0;
}
.collapse-link:hover {
    color: #000453;
    background-color: #fff;
    margin-left: -26px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.table {
    width: 100%;
    background: 0 0;
    border: 0;
    color: var(--text);
}
.table thead th {
    background-color: var(--main-blue);
    border: none !important;
}
.table td {
    border-top: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: var(--text) !important;
}
.table th span {
    position: absolute;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.table tr:hover {
    background-color: var(--main-blue);
    cursor: pointer;
}
.table thead tr th:first-of-type {
    border-top-left-radius: 16px;
}
.table thead tr th:last-of-type {
    border-top-right-radius: 16px;
}
.table .sort-arrow-box {
    display: inline-block;
    position: absolute;
    right: -15px;
    top: 40%;
    transform: translateY(-60%);
}
.table .sort-arrow {
    display: flex;
    flex-direction: column;
}
.table .sort-arrow i {
    height: 5px;
}
.logged-in {
    display: none;
    -webkit-appearance: none;
}
.banner-btn a, .dropdown-menu a, .mylog, .payment_option, .social_link a, .toggle {
    text-decoration: none;
}
.slider-img-box {
    color: #fff;
    position: absolute;
    bottom: 16px;
    left: initial;
}
.slider-img-box-left {
    left: 16px;
}
.slider-img-box-right {
    right: 16px;
}
.slider-img-box .banner-number {
    font-size: var(--font4);
    margin: -.8rem 0 0;
    font-weight: 700;
    text-shadow: .18rem .18rem #000;
    line-height: 1.2;
}
.slider-img-box .banner-text {
    font-size: var(--font3);
    margin: 0;
    font-weight: 700;
    text-shadow: .125rem .125rem #000;
    line-height: 1.2;
}
.slider-img-box .banner-btn {
    font-size: var(--font4);
    font-weight: 400;
    background-color: var(--main-yellow);
    color: var(--bg);
    padding: 4px 24px;
    border-radius: 32px;
}
.slider-img-box .banner-btn:hover {
    background-color: var(--main-yellow2);
}
.loader-container {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 16px;
}
.dropmenu-btn {
    overflow: hidden;
    max-height: 24.5em;
    width: 22em;
    background-color: #203290;
    padding: 10px;
    border: .5em solid #02082b;
}
.menu-svg {
    fill: white;
    color: #fff;
    height: 32px;
}
.icon-svg:hover, .menu-svg:active, .menu-svg:hover {
    fill: #0056b3;
}
.notification .body, .notification .header {
    background-color: inherit;
    color: inherit;
}
.icon-svg {
    fill: #007bff;
}
button:disabled {
    background-color: grey;
}
.nav-bar-footer-panel {
    line-height: 1.15;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px 0 calc(env(safe-area-inset-bottom) + 4px);
    bottom: 6px!important;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 12;
    background: black;
    transition: .4s;
    margin: 0 auto;
    border-radius: 30px;
    opacity: .9;
    max-width: 400px;
}
.nav-bar-footer-panel.sportsbook {
    bottom: 74px!important;
}
.modal-header p.modal-title, .terms, .terms li {
    color: var(--text);
}
.non-visible {
    visibility: hidden;
}
.bnnrCont {
    margin-top: 0px;
    position: relative;
    overflow: hidden;
}
.bnnrCont .carousel-cell:first-child *{
    opacity: 1;
}
.bnnrCont .carousel-cell * {
    opacity: 0;
}
.bnnrCont.shown .carousel-cell * {
    opacity: 1!important;
}
.btnUpEnd {
    background: var(--bg);
    /*overflow: hidden;*/
}
.btnUpEnd .sec_menu_container {
    z-index: 12;
}
.dropbtn {
    width: 17em;
    background-color: #081050;
    overflow: hidden;
    line-height: 1.5;
    border: .5em solid #02083b;
}
.dropbtn-pay {
    margin-left: -.3em;
    width: 90%}
.redbtn {
    color: red;
}
.xbtn {
    width: 15px;
    height: 15px;
    z-index: 999;
}
#modalPleaseWaitFullCover, .modal-loader {
    z-index: 3001;
    background-color: #202020;
}
#bBack, #bHead, #homebtn {
    background-color: var(--main-yellow);
}
.logo {
    max-height: 50px;
    max-width: 50px;
}
.hmbutton {
    padding-top: .4em;
}
.nav-logged-out-btn {
    min-width: 9.5em;
    white-space: nowrap;
}
.nav-logged-in-btn {
    min-width: 6em;
    display: none;
}
.rotateArrow {
    display: none!important;
    position: relative;
}
.toggle {
    pointer-events: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}
.mobile_menu_content {
    text-align: left;
}
.footer_sub_menu {
    word-wrap: break-word;
    color: #d3d3d3;
    text-align: left;
    margin-bottom: 0;
    list-style-type: none;
}
.footer_sub_menu a {
    color: #adbff6!important;
}
.footer_sub_menu a:hover {
    color: var(--main-yellow)!important;
}
.social_link {
    padding-top: 1em;
    text-align: center;
}
.social_link a img {
    width: 3.2rem;
    height: 3.2rem;
}
.legal_notice {
    text-align: center;
    margin: 0 auto;
}
.recommended_text {
    color: #fff;
    font-size: var(--font4);
    margin-top: 0;
}
.terms a, .terms p, .terms span {
    text-decoration: none;
}
.terms ul {
    margin-left: 1em;
}
.terms-table {
    table-layout: fixed;
}
.landinfo {
    color: var(--bg6);
    font-size: var(--font2);
    list-style: none;
    overflow-y: auto;
    max-height: 10rem;
    margin: 0 !important;
    scrollbar-color: var(--main-yellow) transparent;
    scrollbar-width: thin;
}
.landinfo::-webkit-scrollbar{
    display: block;
}
.landinfo h1, .landinfo h2, .landinfo h3 {
    font-size: var(--font2);
    color: var(--text);
}
#bBack, #bHead {
    position: absolute;
}
.notification {
    border-radius: 12px;
    box-shadow: 8px 8px 10px rgb(0, 0, 0, .8);
}
.notification .header {
    border-radius: 12px 12px 0 0;
    border: 0;
}
.warning {
    background-color: #ff8c00;
    color: #000;
}
.info-green {
    background-color: #32cd32;
    color: #000;
}
.info-blue {
    background-color: #1e90ff;
    color: #000;
}
.info-grey {
    background-color: silver;
    color: #000;
}
.scrollmenu, .second_menu {
    background-color: #203290;
    display: flex;
    height: 44px;
}
.header .blink {
    animation-name: blink;
}
@keyframes blink {
    0%, 1000% {
    color: #000;
}
50% {
    color: transparent;
}
}.header .rotate {
    animation-name: rotate;
}
@keyframes rotate {
    0% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
}.header .flip {
    animation-name: flip;
}
@keyframes flip {
    0%, 100% {
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}
50% {
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
}.header .zoom {
    animation-name: zoom;
    animation-duration: 1.5s;
}
@keyframes zoom {
    0%, 100% {
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}
50% {
    -moz-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}
}.second_menu {
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.scrollmenu {
    margin: 5px 0;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.scrollmenu::-webkit-scrollbar {
    display: none;
}
.dropdown-menu {
    display: none;
    position: absolute;
    overflow: auto;
    border: 1px solid #000;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
    min-width: unset;
}
#divGP {
    position: absolute;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    border: 0;
    background-color: var(--bg1);
}
#gameFrame, .gameName, .winSlider {
    overflow: hidden;
}
#gameFrame, .search .input input {
    position: absolute;
    height: 100%;
    border: none;
    top: 0;
    width: 100%
}
#clearSearchIcon {
    display: none;
    cursor: pointer;
}
.game-images {
    width:100%;
    border-radius:23px;
    overflow-x: scroll;
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin: 0 0 1rem;
    max-height: 300px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.game-images::-webkit-scrollbar {
    display: none;
}
.game-images > * {
    scroll-snap-align: center;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.game-images-pagination {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 0 auto;
}
.game-images-pagination i {
    width: 12px;
    height: 2px;
    background-color: #8F9BAE;
    border-radius: 2px;
    cursor: pointer;
    transition: width 0.5s ease-out;
}
.game-images-pagination i.active {
    width: 24px;
    background: #e0e4eb;
}
#gameDetailsFeatures {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#gameDetailsFeatures p {
    margin: 0;
}
#gameDetailsFeatures svg {
    position: relative;
    top: unset;
    left: unset;
    cursor: pointer;
    transform: rotate(90deg);
}
#modalGameDetails .dialog-header {
    display: block;
}
#modalGameDetails .game-images-pagination + .dialog-closer {
    position: absolute;
    right:20px;
    top:20px;
    background:white;
    border-radius:50%;
    opacity:.5;
    border: 1px solid black;
}
#modalGameDetails .game-images-pagination + .dialog-closer svg {
    fill: black;
}
.game-filters {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 32px;
}
#gameSearchText {
    color: var(--text);
    font-size: var(--font6);
    font-weight: 400;
    display: none;
}
#gameSearchText.active {
    display: block;
}
#gameSearchText span {
    font-size: var(--font6);
}
#gameTitle {
    color: var(--text);
    font-size: 22px;
    font-weight: 400;
}
#gameFrameHolder {
    z-index: 9999999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
}
#closer {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 12px;
    /*right: 12px;*/
    opacity: .4;
    background-color: rgba(0,0,0);
    border: 10px solid rgba(0,0,0);
    border-radius: 50%;
}
#gameFrame {
    z-index: 0;
    left: 0;
    display: none;
}
.popup-msg .modal-body p {
    margin-bottom: .5rem;
}
.popup-msg {
    background-color: #081050;
    margin: 30px auto;
    border-radius: 16px;
    border: .5em solid #02082b;
    position: relative;
}
.popup-msg::before {
    border: 1px solid var(--text);
    border-radius: 16px;
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    display: block;
}
.popup-msg .modal-header {
    padding: 1rem 0 0;
}
.popmsgicon {
    color: #fff;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    text-align: center;
    line-height: 4rem;
    vertical-align: middle;
    padding: 0;
    position: absolute;
    left: -2.5rem;
    top: -2.6rem;
    border: 3px solid #fff;
}
.popmsgicon::before {
    font-size: 3rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.popup-msg .modal-header .header-title {
    color: var(--text);
    margin: 0 auto;
}
.modalcloser {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: var(--text);
}
.popup-msg .modal-body {
    color: var(--text);
    border: 0;
    text-align: left;
    padding-bottom: 0;
    margin-top: 0;
}
.popup-msg .modal-footer {
    border: 0;
    color: #fff;
    padding: 0 1rem 1rem;
}
.popup-msg .modal-footer b {
    position: absolute;
    left: 1em;
}
.popup-msg .modal-footer button {
    background-color: #162478;
    color: #d5dffa;
    padding: 10px 30px;
    border: 1px solid var(--text);
    outline: 0;
    border-radius: 8px;
    font-weight: 700;
}
.gameName {
    text-overflow: ellipsis;
}
#registerInputPhone::placeholder, #phone::placeholder, #fpphone::placeholder {
    color: var(--text);
}
#registerUsernameTips {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    text-decoration: underline;
    transform: translateY(-16px);
    font-size: var(--font2);
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
}
#registerUsernameTips.show {
    display: flex !important;
}
.iti__country-list {
    z-index: 12!important;
}
.iti-mobile .iti--container {
    width: calc(100% - 60px);
}
.tooltip {
    z-index: 10001;
}
.banner-btn a {
    color: var(--bg);
}
.game-count {
    display: flex;
    align-items: center;
}
#gamesContainer {
    padding: 32px;
}
#gamesContainer .showmore{
    margin: 32px auto;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: row dense;
    gap: 32px;
    margin-bottom: 32px;
}
.showMoreGames {
    margin: 0 auto;
    text-transform: capitalize;
}
.filter-container {
    display: none;
    flex-direction: column;
    gap: 16px;
}
.filter-container.active {
    display: flex;
    padding: 32px 32px 0;
}
.filter-container .providers, .filter-container .groups {
    display: none;
    gap: 16px;
}
.filter-container .providers.active, .filter-container .groups.active {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.filter-container .badge-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.filter-container .badge-title {
    font-size: var(--font6);
    font-weight: 400;
    line-height: 1;
    color: var(--text);
}
.filter-container .badge {
    background: #FDC608;
    color: #0a121c;
    padding: 6px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    cursor: pointer;
}
.filter-container .badge-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
.filter-container .badge svg {
    cursor: pointer;
    fill: #0a121c;
}
.gameText {
    font-weight: 500;
    font-size: calc(1vw);
    display: block;
    text-shadow: .1rem .15rem .1rem rgba(0, 0, 0, .6);
}
.item1x1, .item2x1 {
    grid-row: span 1!important;
}
.item1x1 {
    grid-column: span 1!important;
    max-height: 100%;
    max-width: 100%}
.item2x1 {
    grid-column: span 2!important;
    max-height: 100%;
    max-width: 100%}
.item1x2, .item2x2 {
    grid-row: span 2!important;
    max-height: 100%;
    max-width: 100%}
.item1x2 {
    grid-column: span 1!important;
}
.item2x2 {
    grid-column: span 2!important;
}
.splogo>img {
    margin-bottom: 1rem;
}
img.lazy, .lp-game[loading="lazy"]{
    background-image: url('/resources/wm_g777.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100px;
    min-height: 100%;
    min-width: 100%;
}
.sfpay {
    height: 100%;
    object-fit: contain;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
    padding: 1rem;
}
.infoheight {
    width: 25%;
    padding-left: 1rem;
    height: 12rem;
    scrollbar-width: none;
    border-left: 1px solid #fff;
}
.footer_menu_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.menu_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text);
}
.menu_item b {
    font-size: var(--font3);
    line-height: 20px;
    font-weight: 500;
}
.menu_caret {
    display: none;
    transition: .1s;
    transform: rotate(180deg);
    fill: var(--text);
}
.menu_caret.showmenu {
    transform: rotate(0deg)!important;
}
.footer_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.fa-angle-down {
    display: none!important;
}
.menu_links, .showlinks {
    display: flex;
}
.menu_links {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.menu_links a {
    display: inline;
    text-decoration: none!important;
    cursor: pointer;
    color: var(--bg6);
    font-size: var(--font3);
    line-height: 16px;
    font-weight: 275;
}
.menu_links a:active, .menu_links a:focus, .menu_links a:hover {
    color: var(--main-yellow)!important;
    transform: scale(1.05);
}
#gameHolder {
    display: flex;
    justify-content: center;
    padding: 6.8rem 2rem 2rem;
}
#holder {
    width: 70vw;
    height: 85vh;
    position: relative;
    padding-top: 25px;
}
#currentGame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}
.fscontrols {
    position: absolute;
    top: 7rem;
    right: 10%;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
#closefullscreen{
    display: none;
    position: fixed;
}
.fscontrols>i:hover {
    transform: scale(1.1);
}
#closefullscreen {
    top: 5px;
    z-index: 111;
}
.btn-up {
    display: none;
    position: fixed;
    bottom: 32px;
    left: 32px;
    z-index: 99;
    background: transparent;
    outline: none;
    border: none;
}
.btn-up.show {
    display: block;
}
.btn-up:focus {
    outline: none;
}
.btn-up svg {
    fill: var(--bg);
    background: var(--main-yellow);
    border-radius: 50%;
    border: 5px solid var(--main-yellow);
    rotate: 180deg;
}
#macloser {
    position: absolute;
    right: 1.5rem;
    color: #000;
    cursor: pointer;
}
.control {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: var(--font3);
    font-weight: 600;
    padding: 0;
    position: relative;
    background: var(--bg2);
    overflow: hidden auto;
    border-top-left-radius: 16px;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.control::-webkit-scrollbar{
    display: none;
}
.control-body {
    display: flex;
}
.control-menu {
    display: flex;
    flex-direction: column;
    width: 300px;
    z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
}
.control-menu.menu-active {
    display: flex;
}
.control-menu.menu-active ~ .control-info {
    display: block;
}
.sidemenu-tab {
    display: none;
    cursor: pointer;
    place-content: center;
}
.control-info {
    width: calc(100% - 300px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
}
.control-tab, .control-lang, .control-quit, .control-tab-inner {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text) !important;
    font-size: var(--font4);
    line-height: 1;
    font-weight: 400;
    transition: .5s;
    padding: 8px 24px;
    gap: 12px;
}
.control-tab-inner, .sidelang .control-lang {
    padding-left: 60px;
    height: 40px;
}
.control-tab span {
    text-transform: uppercase;
    font-weight: 400;
}
.control-tab svg, .control-lang svg, .control-quit svg, .control-tab-inner svg {
    fill: var(--text);
}
.control-tab:hover, .control-lang:hover, .control-quit:hover, .control-tab.active, .control-tab-inner:hover, .control-tab-inner.active {
    background: var(--main-blue2);
}
a:hover .control-tab span {
    color: var(--main-blue);
}
.control-m-tab {
    display: none;
    justify-content: space-between;
    align-items: center;
    color: black;
}
.control-info-tabs {
    display: none;
    padding: 1rem;
}
.control-info-tabs.active {
    display: block;
}
.control-info-tabs:not(#logcontent){
    padding: 16px 128px;
}
.control-info-tabs .main_button {
    width: 80% !important;
}
.accdiv-modal {
    width: 80%;
    height: 100%;
    transition: .5s;
}
.pending-details {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    color: black;
}
.pending-details > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pending-details p, .pending-details b {
    margin: 0;
    word-break: break-word;
}
.logs-nav {
    display: flex;
    justify-content: space-around;
}
.loglink {
    color: var(--main-blue)!important;
    font-size: var(--font3);
    padding: 1rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.loglink:hover {
    color: black;
    background: #d0d0d0;
    text-decoration: none !important;
}
.logs-menu {
    padding-top: 1rem;
    overflow: scroll;
}
.fs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 1rem;
}
.fs-container img {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 16px;
    cursor: pointer;
}
#pending-log .card {
    width: 75%;
    margin: 1rem auto;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.5);
    border: none;
    overflow: hidden;
}
.mobile-site-nav {
    display: none;
}
.site-link a{
    text-decoration: none !important;
    color: white;
}
.site-link:hover {
    text-decoration: none !important;
    opacity: .7;
}
.only-m {
    display: none;
}
.only-d {
    display: block;
}
.only-m.logged-in {
    display: none !important;
}
.logs-menu > table > tbody > tr > td {
    color: unset;
}
.logs-menu > table > tbody > tr:hover td {
    color: white;
}
#creditchannel {
    padding-right: 0.5rem;
}
.closerD {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    cursor: pointer;
}
#userinfopromos {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
#userinfopromos>div {
    width: 46% !important;
    margin: 0 !important;
}
#playerCreditDm * {
    color: var(--text)!important;
    fill: var(--text)!important;
}
.wsc ::selection, .wsc ::-webkit-selection, .wsc ::-moz-selection {
    color: white !important;
}
.logs-nav > .loglink {
    cursor: pointer;
}

/*///////////////////// NEW CSS /////////////////////*/
.main_header {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--head);
    display: flex;
    align-items: center;
    z-index: 100;
    padding: 16px 32px;
    gap: 32px;
}
a:hover {
    text-decoration: none !important;
}
.main_header_logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    cursor: pointer;
}
.main_header_img.mobile {
    display: none;
}
.main_header_menu {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 600;
    gap: 8px;
}
.main_header_menu > span {
    color: var(--text);
    text-transform: uppercase;
    font-size: var(--font3);
    line-height: 20px;
}
svg.trophy [stroke] {
    stroke: var(--text);
}
.main_header_menu:hover > span, .main_header_menu:hover svg {
    fill: var(--main-yellow);
    color: var(--main-yellow);
}
.main_header_menu:hover svg.trophy [stroke], .main_header_menu.menu-selected svg.trophy [stroke] {
    stroke: var(--main-yellow);
}
.main_header_nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.main_header_tabs {
    display: flex;
    gap: 16px;
}
.main_header_user {
    display: flex;
    gap: 8px;
}
.main_header_lang {
    cursor: pointer;
    display: flex;
}
.main_header_lang svg {
    fill: var(--text);
}
.main_header_lang_button {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
.main_header_lang_button .dropdown-menu {
    top: 110%;
}
.main_header_lang_button::after {
    content: none;
}
.main_hamburger {
    display: none;
}
.hbar {
    width: 1rem;
    border-top: 2px solid var(--text);
}
.hbar-middle {
    width: 1.5rem;
    border-top: 2px solid var(--text);
}
.footer_info > img {
    margin: 1rem 0 0 1.4rem;
}
.footer_txt {
    background: var(--bg2);
    padding: 16px 64px;
}
.footer_bottom_txt {
    padding: 16px 64px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer_rights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    color: var(--text);
}
.footer_rights p {
    text-align: center;
    font-size: var(--font2);
    font-weight: 400;
    margin: 0;
}
.footer_rights p img {
    width: 16px;
    height: 16px;
}
.footer_rights a {
    color: var(--text);
    text-decoration: underline !important;
    font-size: var(--font2);
    font-weight: 400;
}
.footer_rights a:hover {
    color: var(--text-active);
}
.footer_rights .order-2 img {
    margin-right: 8px;
}
.footer_text {
    text-transform: uppercase;
    font-size: var(--font2);
    font-weight: 400;
    text-align: center;
    color: var(--text);
    margin: 0;
}
.footer-title {
    font-size: var(--font3);
    line-height: 20px;
    font-weight: 500;
    color: var(--text);
}
.footer_info {
    display: flex;
    padding: 1rem;
}
.main_footer {
    background: var(--bg1);
    display: flex;
    flex-direction: column;
    padding: 32px 128px;
}
.footer-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 16px 0;
}
.footer-payment-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.footer_social {
    display: flex;
    gap: 8px;
}
.footer_social_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.social_links svg{
    fill: var(--text);
}
.footer_sec {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    margin-bottom: .5rem;
    color: var(--text);
}
.footer_main{
    display: flex;
    justify-content: space-between;
    gap: 32px;
}
.footer_menu{
    display: flex;
    gap: 32px;
}
.footer-sponsor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.footer_icons {
    display: flex;
}
.senator_group {
    display: flex;
    flex-direction: column;
}
.senator_group > span {
    padding-left: 1.4rem;
    color: white;
}
.legal_age {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.legal_age_text {
    color: #fff;
    font-size: var(--font3);
    padding-bottom: 1em;
}
.copyright {
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: var(--font3);
}
.copyright svg {
    fill: var(--text);
}
.banner-section {
    background: var(--bg);
}
.sec_menu_tab_name {
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 70px;
    font-size: var(--font1);
    font-weight: 600;
    line-height: 12px;
}
.sec_menu_container {
    display: flex;
    align-items: center;
    background: var(--bg1);
    position: sticky;
    top: 84px;
    height: 64px;
    z-index: 9;
    padding: 12px 32px;
}
.sec_menu {
    color: var(--main-yellow);
    display: flex;
    align-items: center;
    font-size: var(--font3);
    line-height: 20px;
    width: calc(100% - 372px);
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 16px;
    /*position: relative;*/
}
.sec_menu svg {
    fill: var(--main-yellow);
}
.sec_menu a {
    color: var(--main-yellow);
}
.sec_menu::-webkit-scrollbar {
    display: none;
}
.sec_menu_control {
    position: absolute;
    display: none;
    place-content: center;
    padding: 4px;
    background: var(--main-yellow);
    color: var(--bg);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
}
.sec_menu_control svg {
    fill: var(--bg);
}
.sec_menu_control.active {
    display: grid;
}
.sec_menu_control.back {
    left: 24px;
}
.sec_menu_control.next {
    right: 396px;
}
.sec_menu_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    width: 70px;
}
.sec_menu_container.landing .sec_menu {
    gap: 32px;
}
.sec_menu_container.landing .sec_menu_tab {
    flex-direction: row;
    width: unset;
    gap: 8px;
}
.sec_menu_container.landing .sec_menu_tab_name {
    width: unset;
    font-size: var(--font3);
    line-height: 20px;
}
.sec_menu_tab > *:not(#divGP) {
    opacity: .85;
}
.sec_menu_tab:hover > *:not(#divGP), .sec_menu_tab.active > *:not(#divGP) {
    opacity: 1;
    filter: drop-shadow( 0px 0px 5px rgba(255, 255, 255, .7));
}
.menu-search {
    position: absolute;
    right: 32px;
    max-width: 340px;
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--bg2);
    border-radius: 22px;
    gap: 16px;
    cursor: pointer;
    transition: width .3s ease-in-out;
    border: 2px solid var(--bg1);
    z-index: 2;
}
.menu-search.active {
    width: calc(100% - 32px);
}
.menu-search.active form {
    display: block;
}
.menu-search input {
    all: unset;
    color: var(--text);
    width: 100%;
    font-size: 16px;
    transform: scale(.875);
    transform-origin:left center;
}
.menu-search input::placeholder {
    color: var(--text);
    opacity: .9;
    font-weight: 400;
}
.menu-search input::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
.menu-search svg {
    fill: var(--text);
}
.landing-section {
    display: flex;
    flex-direction: column;
    padding: 32px;
    z-index: 8;
}
.landing-section ~ .landing-section {
    padding-top: 0;
}
.landing-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.landing-title .sec_button {
    padding: 4px 12px;
}
.landing-section h3 {
    margin: 0;
    font-size: var(--font6);
    color: var(--text);
    font-weight: 400;
}
.landing-game-grid {
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 5 * 32px)/ 6);
    overflow: auto hidden;
    margin-top: 1rem;
    gap: 32px;
    scroll-snap-type: inline mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.landing-game-grid.single {
    grid-template-rows: 1fr;
}
.landing-game-grid::-webkit-scrollbar{
    display: none;
}
.landing-game-grid > * {
    scroll-snap-align: start;
}
#modalDescriptionBody {
    padding: 0 32px;
}
.modalHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 64px;
}
.modalHeader .modal-title {
    padding-top: 3rem;
    font-size: var(--font6);
}
.modalHeader svg {
    fill: var(--text);
}
.modalHeader p {
    margin: 0;
}
.modalHeader.user {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg1);
    height: 100px;
}
.control-info-tabs#payments {
    padding: 16px 32px;
    height: calc(100% - 100px);
}
.control-info-tabs#payments .lds-container {
    background-color: var(--bg1);
}
.modalHeader .svg-border-light {
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
.modalHeader.user .svg-border-light.side {
    position: unset;
    right: unset;
}
.main_header_lang .langch {
    background: var(--head);
}
.main_header_lang .langch a:hover {
    background: var(--main-blue2);
}
.main_header_lang .langch a {
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
}
.modalCloser {
    position: absolute;
    right: 1rem;
    top: 1rem;
    cursor: pointer;
}
.svg-border-light {
    background: var(--bg2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.modal-header button.close:hover{
    opacity: 1 !important;
}
.modal-dialog{

}
.modal-content {
    padding: 0;
    margin: 0;
    background-color: var(--bg1);
    color: var(--text);
    border-radius: 32px;
}
.register-input {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reg-use {
    color: var(--bg6) !important;
    text-align: center;
    margin: 0;
}
button[data-dismiss] svg{
    background: var(--bg1);
}
.modal-body {
    overflow-y: scroll;
    border-radius: 32px;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 0 16px 16px;
}
.footer-nav {
    font-size: var(--font3);
    font-weight: 400;
    color: var(--text);
    margin: 0;
}
.footer-nav.registerstart, .footer-nav.loginstart {
    font-size: var(--font3);
    font-weight: 500;
    color: var(--main-yellow);
    margin: 0;
    cursor: pointer;
}
.forgotpasswordstart {
    cursor: pointer;
}
.social-login-buttons {
    position: relative;
    margin: 0 auto;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.social-login-buttons:has(*) {
    display: flex;
    margin: 32px 0 0;
    padding: 32px 0 0;
    border-top: 1px solid var(--bg3);
}
.social-login-buttons .primary-btn {
    display: flex;
    align-items: center;
    min-width: 300px;
}
.social-login-buttons .primary-btn span {
    width: 100%;
    display: block;
    text-align: center;
}
.google-button-wrapper {
    position: relative;

}
.google-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    cursor: pointer;
}

.primary-btn.facebook {
    background-color: #1877F2 !important;
    color: white !important;
    padding: 8px 12px;
}
.g_id_signin * {
    font-weight: 500 !important;
    font-family: Kanit !important;
    font-size: 16px !important;
}
hr.social {
    margin: 32px 0;
    border-color: var(--bg3);
}
.modal-footer {
    padding: 32px;
    border: none;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
}
.uep-tabs li{
    width:50%;
    text-align: center;
    min-height: 40px;
    background: none;
}
.uep-tabs li a{
    color: var(--bg6)!important;
    background: none !important;
    font-weight: normal;
    border: 0 !important;
    padding: .5rem;
    height: 100%;
}
.uep-tabs li .active {
    color: var(--text)!important;
    border-bottom: 2px solid var(--text)!important;
}

#myAccountSaveAlert {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}
.textpage-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.textpage-wrapper section {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.textpage {
    padding: 64px 128px;
}
.textpage .terms {
    max-width: 900px;
    margin: 0 auto;
    font-weight: 400;
}
.terms * {
    color: var(--text);
    font-size: var(--font4);
    font-weight: 400;
}
.terms h1, .terms h1 * {
    font-size: var(--font6);
}
.terms h2, .terms h2 *, .terms h3, .terms h3 * {
    font-size: 18px;
}
.terms .primary-btn {
    display: block;
    width: 80% !important;
    max-width: 350px;
    color: var(--bg);
    padding: 8px 24px !important;
    font-size: var(--font3) !important;
    min-height: 40px;
    margin: 0 auto 1rem !important;
}
.freespin_tab {
    cursor: pointer;
}
.accHR {
    border-top: 2px solid var(--text);
    opacity: .4;
    margin: .7rem 0;
}
.sec_menu_tab.dropdown-toggle::after {
    display: none;
}
body.modal-open {
    overflow: hidden;
    padding-right: 4px;
}
.groupNameText {
    text-align: center;
    margin-bottom: 32px;
    color: var(--text) !important;
    font-size: var(--font6);
    font-weight: 400;
}
.logmenu {
    display: none;
    transition: .5s;
}
.logmenu .control-tab {
    padding-left: 4rem;
}
.sidelang {
    display: none;
}
.logmenu.show {
    display: block;
}
.control-tab.only-m {
    text-transform: uppercase;
}
#playerCreditDm-side *{
    color: black!important;
}
.usercredits {
    background: var(--bg2);
    color: var(--text);
    padding: 24px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.usercredits .ttip {
    fill: var(--main-yellow);
    min-width: 24px;
}
.control-header {
    position: relative;
    width: calc(100% - 48px);
    min-height: 2rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.control-header > div {
    display: flex;
    align-items: center;
    gap: 4px;
}
.control-header .svg-border-light {
    position: absolute;
    top: 0;
    right: -48px;
    background: var(--bg1);
}
.control-header .svg-border-light svg {
    fill: var(--text);
}
.control-header span {
    font-size: 18px;
    font-weight: 400;
}
#siteUsernameDm {
    font-weight: 600;
}
#siteUsernameCreditsDm {
    font-weight: 400;
    font-size: 28px;
    color: var(--main-yellow);
    display: block;
    padding-top: 8px;
}
.favGameToggle {
    cursor: pointer;
    margin-left: 1rem;
    fill: var(--main-yellow);
}
@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}
.shiny-btn:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255, 0) 30%,
        rgba(255,255,255, .8),
        rgba(255,255,255, 0) 70%
    );
    top: 0;
    left: -100px;
    animation: shine 5s infinite linear;
}
.game-detail-list > :first-child > :first-child {
    border-top-left-radius: 23px;
}
.game-detail-list > :first-child > :last-child {
    border-top-right-radius: 23px;
}
.game-detail-list > :last-child > :first-child {
    border-bottom-left-radius: 23px;
}
.game-detail-list > :last-child > :last-child {
    border-bottom-right-radius: 23px;
}
.game-detail-list {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 1rem auto;
    color: var(--text);
    font-size: var(--font3);
}
.game-detail-list .input-group {
    gap: .25rem;
    margin: 0;
}
.game-detail-list .col {
    background: var(--main-blue);
    padding: .25rem;
}
.game-detail-list .col.text-right {
    background: none;
    border: 1px solid var(--main-blue);
    color: var(--text);
    padding: .25rem;
}
.gameplay-buttons {
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
}
.gameplay-buttons a, .gameplay-buttons button {
    font-size: var(--font3);
}
#modalGameDetails {
    transform-style: preserve-3d;
}
.heartemoji {
  color: #fff;
  font-size: 1.2rem;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}
input.veriff-text {
    color: var(--main-blue)!important;
}
.depo-maingroups {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
}
.depo-group {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    gap: 8px;
    min-height: 60px;
    min-width: 165px;
    width: 30%;
    background: #8f9bae;
    border: 3px solid #8f9bae;
    border-radius: 14px;
    transition: .2s;
    color: black;
    cursor: pointer;
}
.depo-group img {
    display: block;
}
.depo-group-details {
    display: none;
}
.depo-group.active, .depo-group:hover {
    background: #FFF6C2;
    border: 3px solid var(--main-yellow);
}
.cancelbtn {
    text-transform: capitalize;
}
.tooltipAmount {
    fill: var(--text);
}
.subgroup-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    background: #8f9bae;
    border: 3px solid #8f9bae;
    min-height: 70px;
    max-width: calc(50% - .5rem);
    width: 100%;
    padding: .5rem;
}
.subgroup-title.active, .subgroup-title:hover{
    background: #fff6c2;
    border-color: var(--main-yellow);
}
.subgroup-divider {
    margin: 0 auto 1rem;
    width: 75%;
    border-top: 3px solid var(--text);
}
.subgroup-title-container {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 1rem;
}
.PayInOutTitle {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 1rem;
}
.PayInOutTitle > svg {
    position: absolute;
    left: 0;
    display:none;
    cursor: pointer;
}
#myAccTitle {
    display: flex;
    position: absolute;
    left: 50%;top: 50%;
    transform:translate(-50%,-50%);
    color: var(--text);
    font-size: var(--font6);
    font-weight: 400;
    align-items: flex-end;
    gap: .5ch;
}
#myAccTitle svg {
    width: calc(var(--font6) + 4px);
    height: calc(var(--font6) + 4px);
}
.prevbtn {
    display: none;
    left: -2rem;
}
.backbtn {
    display: none;
    left: -1rem;
}
.bordered-tl {
    -webkit-border-top-left-radius: 23px;
    border-top-left-radius: 23px;
}
.bordered-tr {
    -webkit-border-top-right-radius: 23px;
    border-top-right-radius: 23px;
}
.bordered-bl {
    -webkit-border-bottom-left-radius: 23px;
    border-bottom-left-radius: 23px;
}
.bordered-br {
    -webkit-border-bottom-right-radius: 23px;
    border-bottom-right-radius: 23px;
}
.bonus-container {
    border-radius: 12px;
    padding: 1rem;
    position: relative;
    height: 450px;
    width: 300px;
    margin: 10px;
}
.bonus-container table, .PromoContainer table{
    z-index: 1000;
    position: relative;
    white-space: nowrap;
}
.bonus-container table tr > td:only-child {
  white-space: normal;
}
.bonus-container table tr > td:not(:only-child) {
  white-space: nowrap;
}
.bonus-img { transition: .5s; }

.bonus-img.open {
    transform: scale(1.5);
}
.bonus-amount {
    font-size: var(--font6);
    font-weight: bolder;
    font-style: italic;
    text-shadow: 1px 1px #fff;
    z-index: 1;
}
.secmenu_searchbox, .secmenu_bbtn {
    position: relative;
}
/* logo animation */
.loader-svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 1.5rem;
}
.loader-svg .logo-draw {
        stroke: #ffc808;
        stroke-width: 1px;
        fill: transparent;
        stroke-dasharray: 450;
        stroke-dashoffset: 450;
        animation: logo-animate 5s linear infinite;
}
@keyframes logo-animate {
        50% {
                stroke-dashoffset: 0;
        }
        95% {
                stroke-dashoffset: 450;
        }
        100% {
                stroke-dashoffset: 450;
        }
}
img[alt="bancodeantigua"] {
    display: none;
}
.progress-svg {
  -webkit-animation: progress-rotating 1s linear infinite;
  animation: progress-rotating 1s linear infinite;
}
@-webkit-keyframes progress-rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes progress-rotating {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* GRADE PROGRESS */
.progressContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pBar {
    height: 16px; width: 100%;
    background: #bbbde0;
    border-radius: 8px;
}
.progressBar {
    height: 16px; width: 0;
    background: green;
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.progressCircle{
    position: relative;
    filter: grayscale(1);
    /*width: 50px;*/
    height: 50px;
    aspect-ratio : 1 / 1;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px grey;
    -webkit-box-shadow: 0 0 0 2px grey;
    -moz-box-shadow: 0 0 0 2px grey;
    -ms-box-shadow: 0 0 0 2px grey;
    -o-box-shadow: 0 0 0 2px grey;
}
.nograyscale {
    filter: grayscale(0) !important;
    -webkit-filter: grayscale(0) !important;
    -moz-filter: grayscale(0) !important;
    -o-filter: grayscale(0) !important;
    -ms-filter: grayscale(0) !important;
}
.progressCircle.blue{
    background: radial-gradient(#11288a, #16134b);
}
.progressCircle.silver{
    background: radial-gradient(#9091a8, #dcdcfe, #fffefe, #dcdcfe, #9091a8);
}
.progressCircle.gold{
    background: radial-gradient(#fcd466, #a07600, #f8c851);
}
.progressCircle.vip{
    background: radial-gradient(#991df4, #520689, #f8c851);
}
.progressCircle.blue::after{
    content: attr(data-after);
    color: white;
    font-family: Impact, sans-serif;
    font-size: var(--font3);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.progressCircle.silver::after{
    content: attr(data-after);
    color: black;
    font-family: Impact, sans-serif;
    font-size: var(--font3);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.progressCircle.gold::after{
    content: attr(data-after);
    color: black;
    font-family: Impact, sans-serif;
    font-size: var(--font3);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.progressCircle.vip::after{
    content: attr(data-after);
    color: white;
    font-family: Impact, sans-serif;
    font-size: var(--font3);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.pulsing {
    animation: pulse 1s ease-in-out infinite;
    -webkit-animation: pulse 1s ease-in-out infinite;
}
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
    }
    50% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.MissionsContainer {
    width: 100%;
    height: 120px;
    border-radius: 6px;
    border: 1px solid grey;
    box-shadow: 0 8px 6px -9px black;
    -webkit-box-shadow: 0 8px 6px -9px black;
    -moz-box-shadow: 0 8px 6px -9px black;
    -ms-box-shadow: 0 8px 6px -9px black;
    -o-box-shadow: 0 8px 6px -9px black;
    margin-bottom: 1rem;
    padding: .5rem;
    position: relative;
    cursor: pointer;
}
.mProgress {
    height: 10px;
    width: 75%;
    border-radius: 10px;
    background: #bbbde0;
    position: absolute;
    bottom: 20%;
    left: 2%;
}
.mProgressBar {
    height: 10px;
    border-radius: 10px;
    background: green;
}
.mpGif {
    position: absolute;
    bottom: 2%;
    right: 2%;
    cursor: pointer;
}
.missionPrize {
    position: absolute;
    right: 2%;
    top: 10%;
}
.PromoContainer {
    width: 100%;
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid grey;
    box-shadow: 0 8px 6px -9px black;
    -webkit-box-shadow: 0 8px 6px -9px black;
    -moz-box-shadow: 0 8px 6px -9px black;
    -ms-box-shadow: 0 8px 6px -9px black;
    -o-box-shadow: 0 8px 6px -9px black;
    margin-bottom: 1rem;
    padding: .5rem;
    position: relative;
    cursor: pointer;
    transition: .5s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.PromoContainer.open {
    max-height: unset;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.modal-title {
    line-height: 1.2;
}
h3.Promo-title {
    white-space: nowrap;
    overflow: hidden;
}
.Promo-image {
    position: absolute;
    right: -2%;
    bottom: -2%;
    height: 120%;
    width: auto;
}
.PromoContainer.open > .Promo-image {
    height: 75%;
    max-height: 155px;
    width: auto;
}
.PromoContainer.open > .PromoState img {
    transform: scale(1.5);
}
.PromoContainer.open.claim {
    animation: none;
     -webkit-animation: none;
}
.PromoContainer.open.claim::after {
    display: none;
}
.PromoContainer.claim::after {
    content: "!";
    color: white;
    font-weight: 700;
    width: 26px;
    height: 26px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -10px;
    left: -10px;
    display: grid;
    place-content: center;
}
.PromoContainer.inactive {
    opacity: .7;
    filter: grayscale(.1);
    -webkit-filter: grayscale(.1);
}
.PromoContainer.open.inactive {
    opacity: 1;
}
.Promo-subtitle {
    min-height: 1.5rem;
}
.claim h3 {
     animation: shakeit 2s ease infinite;
     -webkit-animation: shakeit 2s ease infinite;
     transform-origin: 50% 50%;
}
#promoCount{
    color: white;
    font-weight: 600;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 80%;
    right: 65%;
    display: none;
    place-content: center;
}
.wof-detail span {
    font-size: var(--font3);
}
#wofspinCount{
    color: white;
    font-weight: 600;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 80%;
    right: 75%;
    display: none;
    place-content: center;
}
#wofspinCountMob{
    color: white;
    font-weight: 600;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    place-content: center;
}
#promoCountMob{
    color: white;
    font-weight: 600;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    place-content: center;
}
#wof{
    position: relative;
}
.wofffcontainer {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-direction: column;
}
.wof-detail {
    display: flex;
    flex-direction: column;
    width: 80%;
}
.wof-detail p {
    font-size: var(--font4);
}
#wofCounter {
    color: white;
    font-weight: 700;
    width: 26px;
    height: 26px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: -8px;
    display: none; /*grid*/
    place-content: center;
}
#fp-wofCounter {
    color: white;
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;
    font-size: var(--font2);
}
#wof[data-after="0"] button {
    background: gray !important;
}
#wof[data-after="0"]::after {
    display: none;
}
#WOFcontainer {
    height: 30em;
    overflow: hidden;
    /*transform: rotate(-15deg);*/
    background-color: transparent; /*cadetblue;*/
}
.WheelOfFortune {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: transparent;
}
.WOFcircle {
    position: relative;
    border: 0px solid black;
    padding: 0;
    margin: 1em auto;
    width: 25em;
    height: 25em;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
    transition: all 5s ease-in-out;
    z-index: 100;
    background-size: cover;
    border: 4px solid gray;
    box-shadow: inset 0px 3px 30px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0px 3px 30px rgba(0,0,0,.5);
}
@keyframes jiggle {
    0% {
        transform: rotate(-2deg);
    }
    100% {
        transform : rotate(2deg)
    }
}
.WOFcircle.jiggle {
    animation-name: jiggle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.jiggle {
    animation-duration: 1.5s;
}
@keyframes spinning {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spinning {
    animation: spinning 5s ease-in-out;
}
.WOFsector {
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%;
    border: 0px solid white;
    box-shadow: inset 0px 3px 30px rgba(0,0,0,.5);
    -webkit-box-shadow: inset 0px 3px 30px rgba(0,0,0,.5);
}
.text {
    position: absolute;
    left: -85%;
    width: 160%;
    height: 200%;
    text-align: center;
    -webkit-transform: skewY(-130deg) rotate(24deg);
    transform: skewY(-130deg) rotate(24deg);
    padding-top: 0px;
    padding-right: .5rem;
    font-size: calc(20px + .5vw);
}
.text.sec { padding-top: 30px; font-size: calc(14px + .5vw); }
.text.thrd { padding-top: 50px; font-size: calc(12px + .5vw); }
.WOFsector .text  {
    color: white;
    font-weight: 600;
}
.WOFspin {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    padding: 5px;
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) ;
    z-index: 999;
    background-color: var(--main-yellow) !important;
    border: 1px solid gray;
}
#WOFspin.blue {
    color: white;
    background-color: var(--main-blue) !important;
}
#WOFspin.gold {
    background-color: var(--main-yellow) !important;
}
#WOFspin.silver {
    color: white;
    background-color: #9091a8 !important;
}
.WOFwintext {
    display: none;
}
#raysHolder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#rays   {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -350px;
    margin-left: -350px;
    z-index: 99;
    filter: contrast(200%);
    display: none;
}
#rays.spin {
    animation-name: spin;
    animation-duration: 20000ms; /* 20 seconds */
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.wheel_win_arrow {
        background: url(/assets/images/arrow.png) 0 0 no-repeat;
        width: 2.8em;
        height: 10em;
        background-size: contain;
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translate(-50%);
        z-index: 999;
}
#winnerText {
    font-size: var(--font5);
    font-weight: 700;
    color: white;
    text-align: center;
}
.WOFwin {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 1s linear;
}
.WOFwin.show{
    visibility: visible;
    opacity: 1;
}
@-webkit-keyframes shakeit {
  0% { transform:translate(0,0) }
  1.78571% { transform:translate(5px,0) }
  5.57143% { transform:translate(0,0) }
  8.35714% { transform:translate(5px,0) }
  11.14286% { transform:translate(0,0) }
  15.92857% { transform:translate(5px,0) }
  20.71429% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
}
.WOFsector:nth-child(3n+1){background-color: var(--main-blue);}
.WOFsector:nth-child(3n+2){background-color: var(--main-yellow);}
.WOFsector:nth-child(3n){background-color: #fc2727;}
.psp-form > *:has(*), .psp-response > * {
    margin-bottom: 1rem;
}
#payments .psp-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.psp-container .card, .psp-error.card {
    border: 1px solid var(--bg2);
    background: #233141;
    color: var(--text);
    border-radius: 20px;
    padding: 24px;
    margin: 0;
    gap: 24px;
    transition: .2s ease-in-out;
}
.psp-container form .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.psp-container .card-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}
.psp-container .card-title p {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
}
.psp-container .card-title span {
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background: var(--text);
    color: var(--bg2);
    font-weight: 600;
    font-size: 16px;
}
.psp-container .card-body {
    display: flex;
    justify-content: space-between;
}
.psp-groups .card-body {
    align-items: unset;
    padding: 0;
    gap: 16px;
}
.psp-groups .card-body .card {
    background: var(--bg1);
    flex: 1;
    margin: 0;
    padding: 16px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border-radius: 14px;
    position: relative;
    transition: all .2s ease-in-out;
    border: 2px solid var(--bg2);
    max-width: 50%;
    min-height: 120px;
}
.psp-extra .card:has([data-done], [data-loading], [data-waiting]) {
    background: transparent;
    box-shadow: none;
}
.psp-extra:has([data-waiting]) label,
.psp-extra:has([data-waiting]) select,
.psp-extra:has([data-done], [data-loading], [data-waiting]) > .card-title p,
.psp-extra .card:has([data-done], [data-loading], [data-waiting]) > .card-title p {
    color: var(--bg5);
}
.psp-extra:has([data-done], [data-loading], [data-waiting]) > .card-title span,
.psp-extra .card:has([data-done], [data-loading], [data-waiting]) > .card-title span {
    background: var(--bg5);
}
.psp-extra .card:has([data-done], [data-loading], [data-waiting]) .card:not(.active) .psp-title * {
    color: var(--bg5);
    fill: var(--bg5);
}
.psp-container .card:has([data-done]) .card.active[data-done] .psp-title *,
.psp-container .card:has([data-loading]) .card.active[data-loading] .psp-title *,
.psp-container .card:has([data-waiting]) .card.active[data-waiting] .psp-title * {
    color: var(--bg2);
}
.psp-extra:has([data-waiting]) {
    background: transparent;
}
.psp-extra:has([data-waiting]) * {
    pointer-events: none;
}
.psp-extra:has([data-waiting]) .input-group {
    border-color: var(--bg5);
    color: var(--bg5);
}
.psp-groups .card-body .card:not(.active, [data-done], [data-loading]) svg * {
    fill: var(--text);
}
.psp-loading svg *, .psp-done svg * {
    fill: var(--bg1);
}
.psp-loading, .psp-done {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #5BA363;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: none;
    place-content: center;
    z-index: 1;
}
.card[data-loading] .psp-loading, .card[data-done] .psp-done {
    display: grid;
}
.psp-groups .card-body .card span:not(.psp-loading, .psp-done) {
    font-size: 10px;
    opacity: .65;
}
.psp-groups .card-body .card p {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
}
@media (hover: hover){
    .psp-groups .card-body .card:hover {
        background: #233141;
        border-color: #5BA363;
        box-shadow: 0px 0px 10px 0px #5BA363;
    }
}
.psp-groups .card-body .card.active {
    background: #233141;
    border-color: #5BA363;
    box-shadow: none;
}
.psp-groups .card-body .card.active[data-done],
.psp-groups .card-body .card.active[data-loading] {
    background: var(--text);
}
.psp-title {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.psp-amount .input-group {
    flex-wrap: nowrap;
}
.psp-amount .input-group > span {
    min-width: 40px;
    height: 40px;
    display: grid;
    padding: 0 12px;
    place-content: center;
    background: var(--bg3);
    color: var(--bg1);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    font-size: 24px;
}
.psp-amount .input-group > input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.psp-amount + .input-group-button {
    display: none;
}
.psp-amount:not(.d-none) + .input-group-button {
    display: block;
}
.amount-details {
    display: flex;
    flex-direction: column;

}
.amount-details span {
    color: var(--bg6);
    font-weight: 400;
    margin: 0;
}
#payments form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 32px;
}
#payments .input-group {
    margin: 0;
}
.psp-extra .input-group select, 
.psp-extra .input-group input {
    background: transparent;
}
.psp-extra .input-group input:focus ~ label,
.psp-extra .input-group input:not(:placeholder-shown) ~ label,
.psp-extra .input-group select:valid ~ label,
.psp-extra .input-group select:disabled ~ label {
    background: #233141;
}
.psp-extra [data-waiting] .input-group input:focus ~ label,
.psp-extra [data-waiting] .input-group input:not(:placeholder-shown) ~ label,
.psp-extra [data-waiting] .input-group select:valid ~ label,
.psp-extra [data-waiting] .input-group select:disabled ~ label {
    background: var(--bg1);
}
#payments .input-group-button button, .payment-warning button.primary-btn {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto;
}
.denominations .tertiary-btn { 
    background: #2663AC;
}
.specialselect {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #233141;
    border: 2px solid var(--bg2);
    border-radius: 16px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.psp-extra [data-waiting] .specialselect,
.specialselect.open {
    background: var(--bg1);
}
.specialselect .preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.specialselect .options {
    display: none;
    flex-direction: column;
    width: calc(100% + 4px);
    position: absolute;
    top: 100%;
    left: -2px;
    background: var(--bg1);
    border: 2px solid var(--bg2);
    border-radius: 16px;
}
.specialselect .option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
}
.specialselect .options .option.selected,
.specialselect .options .option:hover {
    background-color: var(--bg2);
}
.specialselect svg {
    margin: 0 16px;
    fill: var(--text);
    transition: .2s ease-out;
}
.specialselect.open {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.specialselect.open .options {
    display: flex;
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
.specialselect.open svg {
    transform: rotate(180deg);
}
.payment-warning {
    background: #ffc107;
    color: black;
    border-radius: 20px;
    padding: 24px;
}
.payment-warning ul {
    list-style: inside;
}
.payment-warning button.primary-btn {
    background: #007bff !important;
    color: white !important;
}
.payment-warning-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.payment-warning-title h4 {
    margin: 0;
}
.payment-warning-title svg {
    transform: rotate(180deg);
}
.pos-loader {
    min-height: 50vh;
}
.pos-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pos-container .card {
    width: 100%;
    padding: 1rem;
    margin: 0;
    text-align: center;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}
.pos-container .card-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform-origin: top left;
    transform: scale(0);
    transition: all 200ms ease-in-out;
}
.pos-container .card.open .card-body {
    max-height: 500px;
    opacity: 1;
    transform: scale(1);
}
.pos-container .card-title {
    margin: 0;
    font-weight:600;
    color:var(--main-yellow)
}
.pos-container .card-subtitle {
    font-style: italic;
    margin: 1rem 0;
}
.pos-container .card-img {
    margin-bottom: 1rem;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5)
}
#depositSelectorMenu > p, #withdrawSelectorMenu > p {
    text-align: center;
}
.rgmenu {
    display: none;
}
.rgmenu.show, .sidelang.show {
    display: block;
}
#rg-self-exclusion > p:first-child {
    font-size: var(--font3);
    font-weight: 400;
    margin-bottom: 32px;
}
#rg-self-exclusion > p:last-child {
    font-size: 12px;
    font-weight: 400;
}
#rg-self-exclusion > p:last-child a {
    color: #FDC608 !important;
}
.self-exclusion-options {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
}
.self-exclusion-options:has(li.active) li:not(.active) {
    color: gray;
    fill: gray;
    border-color: gray;
}
.self-exclusion-options:has(li.active) li:not(.active) div {
    background: gray;
}
.self-exclusion-options li.active {
    background: var(--main-blue);
    border-color: var(--bg1);
    box-shadow: 0 0 5px #BFC7D440;
}
.self-exclusion-options li, .user-excluded-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 50px;
    padding: 8px;
    height: 72px;
    border: 1px solid var(--text);
    width: calc(50% - 12px);
    cursor: pointer;
}
.self-exclusion-options li div, .user-excluded-pill > div:first-child {
    background: var(--text);
    color: var(--bg);
    border-radius: 50%;
    text-align: center;
    display: grid;
    place-content: center;
    aspect-ratio: 1 / 1;
    width: 56px;
    height: 56px;
    position: relative;
}
.self-exclusion-options li > * {
    line-height: 1;
    font-size: var(--font3);
    font-weight: 400;
    text-align: center;
}
.self-exclusion-options li span b {
    font-size: 18px;
}
.user-excluded-message {
    display: flex;
    flex-direction: column;
    padding: 0 16px 32px;
}
.user-excluded-message hr {
    margin: 32px 0;
    border-color: #5F6D7D;
}
#rg-self-exclusion hr {
    margin: 40px 0;
    border-color: #5F6D7D;
}
#messageModalContent:has(.user-excluded-message) + .modal-footer,
#messageModalContent:has(.confirmation-message) + .modal-footer {
    display: none;
}
.user-excluded-end {
    font-size: 12px;
    text-align: left;
    font-weight: 400;
    margin: 0;
}
.user-excluded-end a {
    color: var(--main-yellow);
}
.user-excluded-pill {
    cursor: auto;
    background: var(--warning);
    color: #1a2838;
    border: 0;
    width: unset;
    height: unset;
    margin-bottom: 32px;
}
.user-excluded-pill > div:first-child {
    background: #1a2838;
    color: var(--warning);
}
.user-excluded-pill > div:first-child * {
    line-height: 1;
}
.user-excluded-pill > div:first-child > span:first-child {
    font-size: 18px;
}
.user-excluded-pill > div:last-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
}
.user-excluded-pill > div:last-child > span:first-child {
    font-size: var(--font3);
}
.user-excluded-pill > div:last-child > span:not(:first-child) {
    font-weight: 400;
    font-size: var(--font2);
}
.user-excluded-information {
    text-align: left;
    font-size: var(--font3);
    margin-bottom: 32px;
}
.confirmation-message {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 32px;
}
.confirmation-message > * {
    text-align: center;
    margin: 0;
}
.confirmation-message > p {
    color: var(--warning);
}
.confirmation-message > span {
    color: var(--main-yellow);
    text-decoration: underline;
    cursor: pointer;
}
.confirmation-message > button {
    margin: 16px 0;
}
.limitations {
    display: flex;
    flex-direction: column;
}
.limit-section .input-group input, .limit-section .input-group label {
    background: var(--bg2) !important;
}
.limitations .limit-section .limit-section-inner {
    display: none;
}
.limitations .limit-section.active .limit-section-inner {
    display: block;
}
.limitations .limit-section.active .limit-section-title svg.arrow {
    transform: rotate(180deg);
}
.user-limit-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--font3);
    border-radius: 24px;
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 8px;
    margin: 16px 0 8px;
    width: fit-content;
    cursor: pointer;
}
svg.limit-svg, .user-limit-svg svg, .user-limit-delete svg, .user-limit-delete-all svg {
    fill: var(--warning) !important;
}
.limit-section-inner .limit {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg2);
    padding: 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}
.limit-section-inner .limit p {
    margin: 0;
}
.limit-section-inner .limit .limit-current {
    font-size: var(--font2);
}
.limit-section-inner button {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 16px;
}
.limit-section-inner .sec_button {
    color: var(--warning);
    border-color: var(--warning);
    padding: 8px 24px;
    height: 40px;
    font-size: var(--font4);
    font-weight: 400;
    display: flex;
    align-items: center;
}
.limit-section-inner .sec_button span {
    font-weight: 400;
}
.limit-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg2);
    border-radius: 16px;
    padding: 8px 16px;
    margin-bottom: 16px;
    border-left: 4px solid var(--main-yellow);
    cursor: pointer;
}
.limit-section-title p {
    margin: 0;
}
.limit-section-title:has(.limit-svg:not(.d-none)) p {
    margin-left: 1rem;
    margin-right: auto;
}
.limit-section-title svg.arrow {
    fill: var(--text);
    transition: 200ms ease-out;
}
.user-limit-list {
    color: var(--warning);
}
.user-limit-list p {
    margin: 0;
}
/* casino jp */
.jpgame {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font2);
    z-index: 1;
    background: var(--main-yellow);
    color: white;
}
.jpgame .jpot {
    color: var(--bg);
    padding: 0 8px;
}
.jpgame div {
    background: black;
    padding: 0 8px;
    transform: perspective(5px) rotateX(-1deg);
    position: absolute;
    left: calc(100% - 1px);
    top: 0;
    width: max-content;
}
.jp-counter {
    color: inherit;
    font-family: "Noto Sans Sunuwar", sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-style: normal;
    display: block;
    text-align: center;
}
.jptickers {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: minmax(345px, 1fr);
    grid-auto-flow: column dense;
    gap: 16px;
    margin-top: 16px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}
.jptickers::-webkit-scrollbar{
    display: none;
}
.jpamount {
    letter-spacing: 1px;
}
.jp-div {
    padding: 24px;
    border-radius: 16px;
    cursor: pointer;
    transition: all .5s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 600;
    white-space: nowrap;
    gap: 16px;
}
.jptickers .jp-div:nth-of-type(8n+1) {
    background: linear-gradient(90deg, #171123 0%, #281E3D 100%);
    color: #7E43EA;
    border: 1px solid #7E43EA;
}
.jptickers .jp-div:nth-of-type(8n+2) {
    background: linear-gradient(89.78deg, #0A141F 0.15%, #172E47 99.78%);
    color: #00FFFF;
    border: 1px solid #00FFFF;
}
.jptickers .jp-div:nth-of-type(8n+3) {
    background: linear-gradient(90deg, #1C0B19 0%, #401939 100%);
    color: #FF008A;
    border: 1px solid #FF008A;
}
.jptickers .jp-div:nth-of-type(8n+4) {
    background: linear-gradient(89.78deg, #1A1A1A 0.15%, #181F00 99.78%);
    color: #CCFF00;
    border: 1px solid #CCFF00;
}
.jptickers .jp-div:nth-of-type(8n+5) {
    background: linear-gradient(90deg, #0A1A0A 2.41%, #143314 100%);
    color: #2DFF00;
    border: 1px solid #2DFF00;
}
.jptickers .jp-div:nth-of-type(8n+6) {
    background: linear-gradient(89.78deg, #0F0F1A 0.15%, #451C00 99.78%);
    color: #FF6600;
    border: 1px solid #FF6600;
}
.jptickers .jp-div:nth-of-type(8n+7) {
    background: linear-gradient(90.58deg, #0F0F23 2.15%, #1C1C40 99.16%);
    color: #4386EA;
    border: 1px solid #4386EA;
}
.jptickers .jp-div:nth-of-type(8n+8) {
    background: linear-gradient(89.78deg, #1A0A2A 0.15%, #39264D 99.78%);
    color: #BF80FF;
    border: 1px solid #BF80FF;
}
#ribbon1 {
    width: 60px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    border-top-left-radius: 3px;
    background: orange;
    color: white;
    font-weight: 600;
}
#ribbon1:after, #ribbon2:after  {
    content: "";
    position: absolute;
}
#ribbon1:after {
    height: 0;
    width: 0;
    bottom: -29.5px;
    left: 0;
    border-left: 30px solid orange;
    border-right: 30px solid orange;
    border-bottom: 30px solid transparent;
}
#ribbon2 {
    width: 60px;
    padding: 0;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    border-top-left-radius: 3px;
    background: var(--main-yellow);
    color: black;
    font-weight: 600;
}
#ribbon2:after {
    height: 0;
    width: 0;
    bottom: -29.5px;
    left: 0;
    border-left: 30px solid var(--main-yellow);
    border-right: 30px solid var(--main-yellow);
    border-bottom: 30px solid transparent;
}
#landingContent {
    padding: 0;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .5s ease, transform .5s ease;
    display: none;
}
#landingContent.visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
#landingContent > div > h2 {
    padding: 0 1rem;
}
.paybtn-title {
    display: none;
}
.paybtn-title-w-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.paybtn-title-w-icon div .plus {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #04c704;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.payment-details {
    text-transform: uppercase;
    font-size: var(--font2);
}
.payment-steps {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
}
.payment-steps hr {
    width: 100%;
    border-color: var(--text);
    margin: 18px 0;
}
.payment-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    min-width: 70px;
}
.payment-step span {
    max-width: 50px;
    font-weight: 600;
    text-align: center;
}
.payment-step i {
    width: 36px;
    height: 36px;
    display: grid;
    place-content: center;
    border: 2px solid var(--text);
    border-radius: 50%;
}
.payment-step svg {
    fill: var(--text);
}
.fee-box {
    text-transform: capitalize;
    font-size: var(--font4);
    font-weight: 400;
}
.fee-box .border-top {
    padding-top: 8px;
}
.fee-box .text-right {
    font-weight: 600;
}
.notebuttons .tertiary-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 22px;
    background: var(--main-blue2) !important;
    color: var(--text) !important;
}
.notebuttons .tertiary-btn:hover {
    background: var(--main-blue) !important;
}
.card-number, .card-expiry, .card-cvc {
    border: 1px solid var(--bg3) !important;
}
.lp-game {
    cursor: pointer;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease;
    background-image: url(https://gana777.com/resources/wm_g777.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50%;
    aspect-ratio: 287/193;
    object-fit: cover;
}
.inline-snap {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1rem;
}
.inline-snap > * {
    scroll-snap-align: start;
}
.lp-game-container:hover .lp-game {
    transform: scale(1.025);
}
.smartbanner {
    top: -84px !important;
}
.smartbanner.smartbanner--android, .smartbanner.smartbanner--ios {
    background: #595959 url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7") !important;
    box-shadow: none !important;
}
.smartbanner__info {
    color: #fff !important;
}
.smartbanner.smartbanner--android .smartbanner__button {
    box-shadow: none !important;
    border-radius: 3px !important;
    overflow: hidden;
}
.smartbanner.smartbanner--ios .smartbanner__button {
    background: var(--main-yellow) !important;
    color: black !important;
}
.smartbanner.smartbanner--android .smartbanner__button__label {
    background: var(--main-yellow) !important;
    color: black !important;
}
.smartbanner.smartbanner--android .smartbanner__exit {
    box-shadow: none !important;
    background: unset !important;
}
.smartbanner__exit::before, .smartbanner__exit::after {
    background: #fff !important;
}
.landing-main-bg {
    position: relative;
    background-image: url(https://gana777.mx/resources/full_main_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    color: white;
}
.landing-wof {
    position: absolute;
    bottom: -150px;
    right: -150px;
    display: block;
}
.landing-main-body {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 1rem;
}
.landing-content {
    position: relative;
    min-height: 300px;
}
.landing-images {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.landing-content p {
    font-size: clamp(1rem, 2rem, 3rem);
    font-weight: bold;
}
.landing-description-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2rem 0;
    width: max-content;
    gap: 1rem;
}
.box {
  width: max-content;
}
.landing-text-mobile {
    display: none;
}
.partner-container {
    display: flex;
    align-items: center;
    justify-content: start;
    padding-bottom: 2rem;
}
.depo-end {
    align-self: end;
}
.partner-lch {
    width: 400px;
}
.lp-sport-widget {
    width: 100%;
    margin: 0 auto 16px;
}
.lp-sport-widget:has(*) {
    margin-bottom: 0;
}
.tours-container {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2rem;
    padding-top: 2rem !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    overflow: hidden;
}
.tours-container h2 {
    text-transform: uppercase;
    color: #e0e4eb;
}
.tour-box {
    position: relative;
    width: 100%;
}
.tour-list {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
    position: relative;
    width: 300px;
    height: 280px;
    align-items: center;
}
.casino-tour {
    display: flex;
    align-items: center;
    border-radius: 1rem;
    padding: 1rem;
    scale: .8;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: all .5s ease-in-out;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}
.casino-tour.active {
    scale: 1;
    opacity: 1;
    z-index: 3;
}
.casino-tour.visible {
    opacity: 1;
    z-index: 2;
}
.tournament-page {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    display: flex;
    flex-direction: column;
    padding: 2rem;
}
.tournament-page h1 {
    text-align: center;
    font-size: clamp(1rem, 2rem, 3rem);
    text-shadow: rgba(0,0,0,0.25) 1px 0 1px;
    margin-bottom: 2rem;
    color: #e0e4eb;
}
.tournament-types {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.tournament-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 2rem;
    margin: 0 auto;
    gap: 1rem;
    max-width: 1200px;
    animation: fadeIn .5s ease-in;
}
.tournament-container .casino-tour {
    all: unset;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
}
.tour-list .ct-inner {
    display: flex;
}
.ct-inner {
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
    height: 100%;
}
.tournament-container .casino-tour.hidden {
    display: none;
}
.detailed-tournament {
    display: block;
    animation: fadeIn .5s ease-in;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    position: relative;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.tournament-container.hidden, .detailed-tournament.hidden {
    display: none;
    opacity: 0;
}
.tournament-container .casino-tour .tour-details {
    align-items: center;
    order: 1;
    min-width: unset;
}
.tour-detail-page {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 1rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.tour-detail-inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tour-detail-inner h2 {
    color: black;
}
.tour-detail-inner h2, .tour-detail-inner > span {
    font-size: 2rem;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.25) 1px 0 1px;
    margin: 0;
    line-height: 1;
}
.tour-detail-inner > div:first-child, .tour-detail-inner > div:first-child > div:first-child {
    justify-content: center;
}
.td-games-container > span {
    font-size: clamp(1rem, 1.5rem, 2rem);
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.25) 1px 0 1px;
    margin-bottom: .75rem;
    color: #042475;
}
.td-games-container {
    text-align: center;
}
.td-games-container .gameBox > img {
    aspect-ratio: 287 / 193;
}
.td-criteria-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.td-criteria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: .25rem;
    background: rgba(0, 0, 0, .1);
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    padding: 1rem;
    font-weight: bold;
    min-width: 200px;
}
.cd-time {
    font-size: 1.5rem;
    line-height: 1;
    font-style: italic;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) 1px 0 1px;
}
.cd-desc {
    font-size: .75rem;
    line-height: 1;
    color: #042475;
}
.criteria-title {
    color: #042475;
}
.td-games {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
}
.td-game {
    border-radius: .5rem;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    overflow: hidden;
    position: relative;
    height: max-content;
}
.td-game img {
    object-fit: cover;
    width: 100%;
    height: auto;
    transition: .3s ease-in-out;
}
.td-game:hover img {
    transform: scale(1.15) !important;
}
.td-game:hover .tourpagebtns {
    display: flex;
}
.tourpagebtns-mobile {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; bottom: 0; left: 0; right: 0;
}
.tourpagebtns {
    position: absolute;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    gap: .25rem;
    display: none;
    flex-direction: column;
    width: 75%;
    text-align: center;
    margin: 0 auto;
}
.td-game:hover .tourpagebtns-act {
    display: flex;
}
.tourpagebtns-act {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 1rem;
    justify-content: space-between;
    display: none;
}
.tourpagebtns-act .tourpage-favbtn {
    cursor: pointer;
}
.tourpagebtns-act .tourpage-infobtn {
    cursor: pointer;
}
.infobtnholder {
    margin-left: auto;
}
.infobtnholder, .favbtnholder {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-content: center;
}
.tourpagebtns-act .tourpage-infobtn:hover, .tourpagebtns-act .tourpage-favbtn:hover {
    scale: 1.15;
}
.td-game-img { width:100%; height:auto; }
.td-game a {
    width: 100%;
    height: 100%;
    display: block;
}
.tour-detail-img {
    width: 100%;
    height: auto;
    max-width: 200px;
}
.tour-prize {
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: rgba(0,0,0,0.5) 1px 0 1px;
}
.td-users { display: flex; gap: 1rem; }
.td-users thead { background-color: #042475; }
.td-users thead tr td { color: #e1e4ed !important; }
.td-users table tr{ border-bottom: 1px solid rgba(0,0,0,0.1); }
.td-users table td{ padding: .25rem; white-space: nowrap; font-weight: bold; color: #042475; }
.td-users table tr td:first-of-type { padding-right: 1rem; }
#tour-next.hidden, #tour-prev.hidden {
    display: none !important;
}
.btn-prev, .btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    background: rgba(0, 0, 0, .4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    cursor: pointer;
}
.btn-prev:hover, .btn-next:hover {
    scale: 1.1;
}
.btn-next {
    right: 10px;
}
.btn-prev {
    left: 10px;
}
.tour-terms {
    color: #042475;
}
.tour-timer {
    display: flex;
    gap: .5rem;
}
.tour-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 250px;
}
.tour-details p {
    font-size: 2rem;
    font-weight: bold;
    white-space: nowrap;
}
.tour-details > span {
    text-shadow: rgba(0,0,0,0.5) 1px 0 1px;
    font-size: 2rem;
    font-weight: bold;
    white-space: nowrap;
}
.tour-details .countdown {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.tournament-container .countdown {
    flex-direction: column;
    margin: 1rem 0;
}
.tour-imgs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cd-timer-container {
    display: flex;
    gap: .5rem;
}
.cd-timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#game-container {
    display: none;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: 999999;
}
#game-container.active {
    display: block;
    animation: fadeIn .5s ease-in;
}
#game-container.active < body {
    overflow: hidden;
}
.td-details-container {
    border-radius: 1rem;
    padding: 1rem;
    width: 100%;
}
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  opacity: .8;
}
.ribbon.S::before, .ribbon.S::after {
    border: 5px solid #af8801;
}
.ribbon.S span {
    background-color: #ffc808;
    color: black;
}
.ribbon.R::before, .ribbon.R::after {
    border: 5px solid darkolivegreen;
}
.ribbon.R span {
    background-color: green;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid darkred;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: red;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}
#up-tour-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    gap: 1rem;
}
#up-tour-container .casino-tour {
    position: relative;
    opacity: 1;
    scale: unset;
}
#up-tour-container .casino-tour .ct-inner {
    display: flex;
    flex-direction: column;
}
#up-tour-container .casino-tour .tour-details {
    min-width: unset;
    justify-content: center;
    order: 1;
}
.wrapper:has(#betby) ~ .dlc {
    bottom: 64px;
}
.dlc {
    background-color: var(--main-yellow);
    padding: 8px;
    position: fixed;
    right: 32px;
    bottom: 32px;
    border-radius: 50%;
    z-index: 99;
    text-align: center;
    display: grid;
    place-content: center;
}
.dlc svg {
    fill: var(--bg);
}
.float-menu {
    display: none;
    align-items: center;
    justify-content: space-evenly;
    padding: .5rem;
    gap: .5rem;
    background: var(--bg1);
    transition: .4s;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 101;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
}
.menuitem {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    cursor: pointer;
    text-decoration: none;
}
.menuitem svg {
    fill: var(--text);
}
.menuitem.active svg {
    fill: var(--main-yellow2);
}
.menuitem.deposit svg {
    fill: var(--main-yellow);
}
.menuitem.deposit span {
    color: var(--main-yellow);
}
.menuitem.disabled svg {
    fill: gray;
    cursor: not-allowed;
}
.menuitem span {
    font-size: var(--font1);
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.menuitem.active span {
    color: var(--main-yellow2);
}
.menuitem.disabled span {
    color: gray;
}
.float-hidden-menu {
    display: grid;
    width: 100%;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 61px;
    transform: translateX(-50%);
    background: var(--bg2);
    overflow: hidden;
    transform-origin: bottom;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}
.float-hidden-menu.active {
    height: unset;
    padding: 8px;
}
.float-hidden-menu .menuitem {
    background: var(--bg1);
    border-radius: 8px;
    padding: 8px;
}
.lower-level, .upper-level {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .5rem;
    padding: .5rem;
}
.hidden-menu-closer {
    width: 100px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto .5rem;
    background: rgba(255, 255, 255, .3);
}
.hidden-menu-closer.dragged {
    background: rgba(255, 255, 255, 1);
}

/*.carousel-cell {
  visibility: hidden;
}

.carousel-cell.pageloaded {
   visibility: visible;
}*/

/*loading indicator*/
.lds-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}
*:has(> .lds-container){
    position: relative;
}
.lds-default {
  color: var(--main-yellow);
}
.lds-default,
.lds-default div {
  box-sizing: border-box;
}
.lds-default {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(0.7) translate(-70%, -70%);
  width: 80px;
  height: 80px;
  margin: auto;
}
.lds-default div {
  position: absolute;
  width: 6.4px;
  height: 6.4px;
  background: currentColor;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 36.8px;
  left: 66.24px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22.08px;
  left: 62.29579px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11.30421px;
  left: 51.52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7.36px;
  left: 36.8px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11.30421px;
  left: 22.08px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22.08px;
  left: 11.30421px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 36.8px;
  left: 7.36px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 51.52px;
  left: 11.30421px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62.29579px;
  left: 22.08px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66.24px;
  left: 36.8px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62.29579px;
  left: 51.52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 51.52px;
  left: 62.29579px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}
/* end of loading*/
.pct-section {
    margin-bottom: 32px;
}
.pct-section .main_button {
    color: var(--bg);
    margin: 0 auto;
}
.credit-wrapper svg {
    fill: var(--text);
}
.promo-category-container {
    overflow-x:auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 15;
    background: var(--bg1);
    padding: .5rem;
}
.promo-category-container::-webkit-scrollbar {
    display: none;
}
.promo-categories {
    display: flex;
    gap: .5rem;
    justify-content: center;
}
.promo-categories .primary-btn {
    background: #0d3769;
    min-width: fit-content;
    padding: .25rem .5rem;
    font-size: var(--font3);
    text-transform: capitalize;
    color: #e0e4eb !important;
    box-shadow: none;
    text-transform: uppercase;
}
.promo-categories .primary-btn.warn::after {
    content: "!";
    color: white;
    font-weight: 700;
    width: 16px;
    height: 16px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;
    margin: 0 !important;
    opacity: 1 !important;
    animation: none !important;
}
.promo-categories .primary-btn.active, .promo-categories .primary-btn:hover {
    background-color: #FDC608 !important;
    color: #0a121c !important;
}
.bonus-page {
    display: flex;
    padding: 32px;
}
.bonus-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}
.bonus-section-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bonus-section-inner h2 {
    color: var(--text);
    font-size: var(--font6);
    margin: 0;
}
.tour-section {

}
.tour-section-inner {
    min-width: 400px;
}
.bonus-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(274px, 50%);
    grid-auto-rows: 274px;
    overflow: auto hidden;
    gap: 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.bonus-inner::-webkit-scrollbar {
    display: none;
}
.promotion_container {
    border: 1px solid var(--bg4);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.promotion_container .modal-body table {
    width: calc(100% - 32px) !important;
    margin: 0 16px 16px;
}
.promotion_container .modal-body table,
.promotion_container .modal-body table tr,
.promotion_container .modal-body table th,
.promotion_container .modal-body table td {
    background: none !important;
    color: var(--text) !important;
    border-color: var(--text) !important;
}
.promo-step-box {
    background: #3ca5e7;
    color: white;
    padding: 8px 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 1rem;
}
[data-theme="dark"] .promo-step-box {
    background: #0A121C;
}
.promo-step-count {
    font-size: 3rem;
    line-height: 1;
    font-weight: bold;
    color: #FDC608;
    text-shadow: 2px 2px black;
}
.promo-modal-image {
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin-bottom: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 245px;
}
.promotion_timer {
    margin: 0;
    width: 100%;
    padding: 4px 16px;
    font-size: 12px;
    line-height: 18px;
    background: #FDC608;
    color: #081D38;
}
.promotion_timer.danger {
    background: #FF2D2D;
    color: #E0E4EB;
}
.promotion_images {
    display: flex;
    justify-content: center;
    gap: 1rem;
    height: 100%;
    padding: 16px;
    overflow: hidden;
}
.promotion_images img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    max-width: 50%;
}
.promotion_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
}
.promotion_table td {
    border: 1px solid;
    padding: 0.25rem;
    text-align: left;
    width: 50%;
}
.promotion-action {
    display: none;
    flex-direction: column;
    gap: 16px;
}
.claimable .promotion-action {
    display: flex;
}
.claimable .promotion-steps {
    display: none;
}
.promotion_terms_btn {
    margin-left: auto;
    font-weight: 500;
    font-size: var(--font3);
    padding: 8px 12px;
    margin: 0 16px 16px auto;
    border-color: #FDC608 !important;
}
.promotion_terms_btn span {
    color: #FDC608;
}
.promotion_terms_btn svg {
    fill: #FDC608 !important;
}
.promotion_splash {
    position: relative;
}
.promotion_splash img {
    max-width: 200px;
    width: 100%;
    height: auto;
    position: absolute;
}
.promotion_img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.promotion_img img {
    max-height: 90%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
}
.promotion-steps {
    padding: 16px;
}
.promotion_title {
    font-size: 18px;
    font-weight: 600;
    color: #e0e4eb;
    padding: 16px;
}
.promotion_details {
    display: none;
    color: var(--text);
    padding: 1rem;
}
.promotion_details table {
    width: 100%;
    color: var(--text) !important;
}
.promotion_container.open .promotion_images {
    height: 220px;
}
.promotion_container.open .promotion_used, .promotion_container.open .promotion_activated {
    max-height: 220px;
}
.promotion_container.open .promotion_details, .promotion_container.open .promotion_terms_link {
    display: block;
}
.promotion_container.open .promotion_arrow {
    transform: rotate(180deg);
}
.promotion_container.open.claim {
    animation: none;
}
.promotion_container.open.claim::after{
    display: none;
}
.promotion_container.claim::after {
    content: "!";
    color: white;
    font-weight: 700;
    width: 26px;
    height: 26px;
    background: red;
    border-radius: 50%;
    position: absolute;
    display: grid;
    place-content: center;
}
.promotion_arrow {
    fill: var(--main-yellow);
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    cursor: pointer;
    transition: .5s all;
}
.promotion_terms_link {
    color: #FDC608 !important;
    padding: 0 16px 0 0;
    text-decoration: none;
    text-align: right;
    display: block;
}
[data-theme="light"] .promotion_terms_link {
    color: var(--text) !important;
}
.promotion_used, .promotion_activated {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    transition: .5s all;
}
.promotion_container *, .promo-modal-image * {
    z-index: 1;
}
.promotion_container:not(:has(.promotion_used)),
.promo-modal-image:not(:has(.promotion_used)) {
    background: var(--promobg) center/cover no-repeat;
}

.promotion_container:has(.promotion_used)::before,
.promo-modal-image:has(.promotion_used)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--promobg) center/cover no-repeat;
    filter: grayscale(1);
    z-index: 0;
}
.promotion_container:has(.promotion_used) > *:not(.promotion_used),
.promo-modal-image:has(.promotion_used) > *:not(.promotion_used) {
    filter: grayscale(1);
}
#myDocumentsImages {
    gap:16px;
    padding: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row dense;
}
.user-image {
    position: relative;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0;
}
.user-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 9 / 16;
    object-fit: contain;
}
.user-image-delete {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .4;
    background-color: rgba(0, 0, 0);
    border-radius: 50%;
}
#myDocumentsImages:has(.user-image:only-child) {
    grid-template-columns: 1fr; 
    justify-items: center;
}
.user-image:only-child {
    max-width: 50%;
    width: 100%;
}
.promotion_details table td button {
    font-size: .75rem;
    max-width: 400px;
    width: 100%;
    margin-bottom: .25rem;
}
.promotion_details .bonus-amount {
    color: #20cb20;
    width: fit-content;
    margin: 0 auto 1rem;
    text-shadow: 1px 1px black;
}
.PromoDIV .promotion_container .promotion_images {
    height: 150px;
}
.PromoDIV .promotion_container.open .promotion_images {
    height: 180px;
}

.grecaptcha-badge { visibility: hidden; }
.last_login {
    font-size: var(--font1);
    color: var(--text);
    bottom: 10px;
    flex: 1 1 auto;
    align-content: end;
}
.psp-code-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: .5rem;
    padding: 1rem 0;
}
.psp-code {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border-radius: .5rem;
    border: 2px solid var(--text);
    width: calc(100% / 6 - .5rem);
    max-width: 120px;
    cursor: pointer;
}
.psp-code.active, .psp-code:hover {
    background: #fff6c2;
    border-color: var(--main-yellow);
}
.psp-code img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
}
.selected-providers {
    color: white;
    font-weight: 700;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    display: grid;
    place-content: center;
}
#elapsed-time {
    padding: 0 1rem;
    color: white;
    font-weight: 600;
    margin-top: auto;
}
/***********************************************-*/
/*******   GAME ICONS    ***********************-*/
/***********************************************-*/
.lp-game-container {
    position: relative;
    transition: .3s ease-in-out;
    aspect-ratio: 287 / 193;
}
.gameBox {
    background: inherit;
    border: 0;
    border-radius: 16px;
    display: block;
    position: relative;
    overflow: hidden;
    min-height: 100px;
}
.gameBox > img {
    transition: transform .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-image: url(/resources/wm_g777.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50%;
}
.gameBox:hover img {
    transform: scale(1.05);
}
.gameBox:hover .hoverplayIcon {
    display: block;
}
@media (max-width: 1400px) {
    .hoverplayIcon .gamePlayBtn {
        bottom: 0 !important;
    }
}
.hoverplayIcon .gamePlayBtn {
    position: absolute;
    left: 0;
    bottom: .5rem;
    width: 100%;
    /*height: 3rem;*/
    text-align: center;
    z-index: 2;
    flex-direction: column;
    align-items: center;
}
.hoverplayIcon .gameInfoBtn {
    position: absolute;
    right: .5rem;
    top: .5rem;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    place-content: center;
    cursor: pointer;
}
.gameHeartBtn {
    display: grid;
    cursor: pointer;
}
.gameHeartBtn:hover > svg, .gameInfoBtn:hover > svg {
    transform: scale(1.1);
}
.hoverplayIcon .gameHeartBtn {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    width: 26px;
    height: 26px;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    place-content: center;
}
.gameBtn-mobile {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    z-index: 2;
    cursor: pointer;
}
.hoverplayIcon {
    display: block;
}
/***********************************************-*/
/*******   MEDIA             *******************-*/
/***********************************************-*/

@media (min-width: 200px) {
    .gameInfoBtn {
        display: none;
    }
    .gamePlayBtn {
        display:none;
    }
    .gameBtn-mobile {
        display: block;
    }
}
@media (min-width: 1040px) {
    .gameInfoBtn {
        display: grid;
    }
    .gamePlayBtn {
        display:flex;
    }
    .hoverplayIcon {
        display: none;
    }
    .desktop:hover .hoverplayIcon, .lp-game-container:hover .hoverplayIcon {
        display: block;
    }
    .gameBtn-mobile {
        display: none;
    }
    .hoverplayIcon .gameHeartBtn {
        top: .5rem;
        left: .5rem;
    }
}
@media (min-width: 600px){
    .btn-up {
        bottom: 32px !important;
    }
    .slider-img-box .banner-number {
        margin: -.8rem 0 0;
    }
    .text.sec { padding-top: 35px; font-size: calc(6px + .5vw); }
    .text.thrd { padding-top: 55px; font-size: calc(4px + .5vw); }
}
@media (min-width: 768px){
    .main-carousel {
        aspect-ratio: calc(2 * 960 + 16) / 400;
    }
    .main-slider > .carousel-cell img {
        border-radius: 16px;
    }
    .main-slider > .carousel-cell {
        width: calc(50% - 8px);
    }
    .carousel-container {
        padding-bottom: 32px;
    }
    .main-pagination {
        display: flex;
    }
    .carousel-container.double-cell .carousel-cell {
        translate: none !important;
        width: calc(50% - 8px);
        max-width: 960px;
    }
    .carousel-container.double-cell .carousel-cell:nth-child(2){
        translate: calc(100% + 16px) !important;
    }
    .carousel-container.double-cell .main-pagination {
        display: none;
    }
    .carousel-container.double-cell .main-slider {
        cursor: default !important;
        gap: 16px;
    }
    .carousel-container.double-cell {
        padding: 16px;
    }
}
@media (min-width: 992px){
    .carousel-container.double-cell .carousel-cell {
        width: calc(50% - 16px);
    }
    .carousel-container.double-cell .carousel-cell:nth-child(2){
        translate: calc(100% + 32px) !important;
    }
    #slideMenu {
        max-width: 1140px;
        width: calc(100% - 32px);
    }
    .loader-container {
        padding: 32px;
        gap:2rem;
    }
    #myAccTitle {
        /*display: none;*/
    }
    #slideMenu {
        height: 90vh;
        overflow: hidden;
        margin: 5vh auto;
    }
    .control-header .svg-border-light, .modalHeader .svg-border-light.side {
        display: none;
    }
    .accHR.logged-in {
        display: none !important;
    }
    .accHR {
        display: none;
    }
    #playerCreditDm-side {
        display: none !important;
    }
    .usercredits {
        border-top-left-radius: 16px;
        margin-bottom: 0 !important;
    }
    .accdiv-modal {
        width: 100%;
    }
    .modal-body {
        padding: 0 124px 32px;
    }
    #modalGameDetails .modal-body, #modalGameDetails .modal-footer {
        padding: 1rem;
    }
    .carousel-container.double-cell .main-slider {
        gap: 32px;
    }
    .carousel-container, .carousel-container.single-cell, .carousel-container.double-cell {
        position: relative;
        padding: 32px;
    }
    .main-slider > .carousel-cell {
        width: calc(50% - 16px);
    }
    .slider-img-box {
        bottom: 32px;
    }
    .slider-img-box-left {
        left: 32px;
    }
    .slider-img-box-right {
        right: 32px;
    }
}
@media (min-width: 1240px){
    .main-carousel {
        aspect-ratio: calc(3 * 960 + 2 * 32) / 400;
    }
    .carousel-container.double-cell .main-carousel {
        aspect-ratio: calc(2 * 960 + 32) / 400;
    }
    .main-slider > .carousel-cell{
        width: calc(33.3% - 16px);
    }
    .carousel-container.triple-cell .carousel-cell {
        translate: none !important;
        width: calc(33.3% - 16px);
        max-width: 960px;
    }
    .carousel-container.triple-cell .carousel-cell:nth-child(2){
        translate: calc(100% + 32px) !important;
    }
    .carousel-container.triple-cell .carousel-cell:nth-child(3){
        translate: calc(200% + 64px) !important;
    }
    .carousel-container.triple-cell .main-pagination {
        display: none;
    }
    .carousel-container.triple-cell .main-slider {
        cursor: default !important;
        gap: 32px;
    }
    .carousel-container.triple-cell {
        padding: 32px;
    }
}
@media (max-width: 1400px){
    .main_header_menu {
        gap: 4px;
        flex-direction: column;
    }
    .main_header {
        gap: 16px;
    }
}
@media (max-width: 1240px){
    .main_header_menu > span {
        display: none;
    }
    .main_footer {
        padding: 32px 64px;
    }
    .footer_main {
        gap: 32px 16px;
        padding: 0 16px;
    }
    #promoCount {
        top: 40%;
        right: 15%;
    }
    #wofspinCount {
        top: 40%;
        right: 30%;
    }
    .landing-game-grid {
        grid-auto-columns: calc((100% - 4 * 32px)/ 5);
    }
    .grid-container {
        grid-template-columns: repeat(5, 1fr);
    }
    .control-info-tabs:not(#lgs){
        padding: 16px 64px;
    }
}
@media (max-width: 1024px){
    .gameText {
        font-size: calc(2vw);
    }
    .reg-form {
        width: 200px;
    }
    .partner-lch {
        width: 300px;
    }
    .landing-wof {
        width: 280px;
        bottom: -120px;
        right: -120px;
    }
    .landing-images {
        justify-content: space-between;
    }
    .td-users {
        flex-direction: column;
    }
    .td-users .table-responsive {
        order: 1;
        margin: 0 auto;
        width: unset;
    }
}
@media (max-width: 991px){
    .psp-groups .card-body {
        flex-wrap: wrap;
        justify-content: center;
    }
    .psp-groups .card-body .card {
        min-width: 130px;
    }
    .smartico-container span {
        display: none;
    }
    dialog .dialog-content {
        max-width: 500px !important;
    }
    :root{
        --font6: 22px;
    }
    .self-exclusion-options li, .self-exclusion-options li > span {
        width: 100%;
    }
    .input-group-button button {
        width: 100%;
    }
    .modal-footer {
        padding: 16px;
    }
    .smartico-widget {
        max-width: 300px;
        padding-bottom: 8px;
    }
    .float-menu .smartico-widget {
        max-width: unset;
        margin-left: 0;
    }
    .footer_main {
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .footer_menu {
        width: 100%;
        justify-content: center;
    }
    .footer-sponsor {
        justify-content: center;
    }
    #slideMenu.slide-menu-open {
        transform: translate(0, 0);
    }
    #slideMenu.slide-menu-open .accdiv-modal {
        width: 100%;
    }
    #slideMenu.slide-menu-open .sidemenu-tab, .sidemenu-tab.active {
        display: grid;
    }
    .control-menu.menu-active, .control-info-tabs, .sidemenu-tab{
        display: none;
    }
    .control-info-tabs.active {
        display: block !important;
    }
    .control-info-tabs:not(#lgs){
        padding: 16px;
    }
    .control-info-tabs .main_button {
        width: 75%;
    }
    .control-info {
        display: none;
    }
    #pending-log .card {
        width: 100%;
    }
    .modalHeader .modal-title {
        padding-top: 0;
    }
    .modalHeader {
        padding: 18px;
    }
    .modalHeader.user {
        height: 64px;
    }
    .control-info-tabs#payments {
        min-height: calc(100% - 64px);
    }
    .logs-menu {
        height: calc(100vh - 96px);
    }
    .usercredits {
        padding: 16px;
    }
    .textpage {
        padding: 32px 64px;
    }
    .groupNameText {
        margin-bottom: 16px;
    }
    .game-filters {
        margin-top: 16px;
    }
    dialog#accModal {
        justify-content: flex-end;
        padding: 0;
        animation: closeDialogFromSide 300ms forwards;
    }
    dialog#accModal[open] {
        animation: openDialogFromSide 300ms forwards;
    }
    dialog#accModal.slide-menu-open .dialog-content {
        max-width: 500px !important;
        border-top-right-radius: 32px;
        border-top-left-radius: 32px;
        overflow: hidden;
        width: 100%;
    }
    dialog#accModal .dialog-content {
        transition: 200ms ease-out;
        transform: translateX(100%);
        margin: 0;
        border-radius: 0;
        max-width: 400px !important;
        width: 90%;
        min-height: 100%;
    }
    dialog#accModal[open] .dialog-content {
        transform: translateX(0);
    }
    dialog#accModal.slide-menu-open .sidemenu-tab, .sidemenu-tab.active {
        display: grid;
    }
    #accModal .modal-dialog-slideout {min-height: 100%; margin: 0 0 0 auto;}
    .modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(100%,0)scale(1);transform: translate(100%,0)scale(1);transition: .5s;}
    .modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(20%,0);transform: translate(20%,0);display: flex;align-items: stretch;-webkit-box-align: stretch;height: 100%;}
    .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body{overflow-y: auto;overflow-x: hidden;}
    .modal-dialog-slideout .modal-content{border: 0;}
    .modal-dialog-slideout .modal-header, .modal-dialog-slideout .modal-footer {height: 69px; display: block;}
    #accModal .modal-dialog-slideout .modal-header h5 {float:left;color:blue;}
    .modal-body {
        border-radius: 0;
    }
    .modalCloser.user {
        fill: white
    }
    #modalDescription .modalHeader {
        padding: 16px;
    }
    #modalDescriptionBody {
        padding: 0 16px;
    }
    .depo-backbtn {
        display: none !important;
    }
    #accModal .slide-menu-open .modal-content {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
        overflow: hidden;
    }
    #accModal .modal-content {
        border-radius: 0;
    }
    .sec_menu_container {
        top: 68px;
        padding: 12px 16px;
    }
    .sec_menu {
        gap: 18px;
        width: calc(100% - 56px);
        padding: 0;
    }
    .sec_menu_control.next {
        right: 64px;
    }
    .sec_menu_control.back {
        left: 8px;
    }
    .sec_menu_tab {
        flex-direction: column;
        gap: 2px;
        width: 42px;
    }
    .sec_menu_container.landing .sec_menu_tab {
        flex-direction: column;
        gap: 2px;
    }
    .sec_menu_container.landing .sec_menu_tab_name {
        font-size: var(--font1);
        line-height: 12px;
    }
    .sec_menu_tab_name {
        width: 42px;
    }
    .menu-search {
        right: 16px;
        min-width: unset;
        width: 44px;
        height: 44px;
        padding: 8px;
        background: var(--bg5);
        color: var(--bg1);
    }
    .menu-search svg {
        fill: var(--bg1);
    }
    .menu-search input {
        color: var(--bg1);
    }
    .menu-search form {
        display: none;
    }
    .menu-search input::placeholder{
        color: var(--bg1);
    }
    .landing-section {
        padding: 32px 16px;
    }
    .landing-game-grid {
        grid-auto-columns: calc((100% - 3 * 16px)/ 4);
        gap: 16px;
    }
    .grid-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-bottom: 16px;
    }
    .filter-container.active {
        padding: 16px 16px 0;
    }
    .footer_menu {
        width: 100%;
        padding: 0;
        justify-content: space-evenly;
    }
    .footer_social_container {
        gap: 16px;
    }
    .main_header_img.mobile {
        display: block;
    }
    .main_header_img.desktop {
        display: none;
    }
    .main_header_lang {
        display: none !important;
    }
    .main_header {
        padding: 8px 16px;
        gap: 16px;
    }
    .main_hamburger {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 20px;
        cursor: pointer;
    }
    .main_header_user_div > button {
        display: none !important;
    }

    .closerD {
        display: none;
    }
    .control-tab.only-m {
        display: flex;
    }
    .only-m {
        display: block;
    }
    .only-d {
        display: none !important;
    }
    .only-m.logged-in {
        display: flex !important;
    }
    .control {
        border-radius: 0;
        overflow-x: hidden;
        min-height: 100%;
    }
    .control-menu {
        width: 100%;
    }
    .control-info {
        width: 100%;
        height: 100%;
    }
    .control-body {
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }
    .control-m-tab {
        display: flex;
    }
    .mobile-site-nav {
        display: flex;
        justify-content: space-evenly;
        margin-right: 2rem;
    }
    #userinfopromos>div {
        height: auto !important;
        min-height: 185px !important;
    }
    #userinfopromos>div>a, #userinfopromos>div>img, #userinfopromos>div>div {
        display: none !important;
    }
    #promoCount, #wofspinCount {
        top: 65%;
        right: 0;
        left: unset;
    }
    .tours-container {
        padding: 2rem 1rem;
    }
    .PayInOutTitle > svg, .PayInOutTitle {
        display:none !important;
    }
    .jp-div {
        padding: 16px;
    }
    .jptickers {
        grid-auto-columns: minmax(300px, 1fr);
    }
    #gamesContainer {
        padding: 16px;
    }
    #gamesContainer .showmore{
        margin: 16px auto;
    }
    .main_footer {
        padding: 16px 0 32px;
    }
    .footer-payment {
        padding-top: 32px;
    }
    .footer_menu {
        gap: 16px;
    }
    .footer_txt {
        padding: 16px;
    }
    .footer_bottom_txt {
        gap: 12px;
        padding: 16px;
    }
    .footer_rights {
        grid-template-columns: unset;
        grid-template-rows: repeat(3, 1fr);
    }
    .modal-content {
        border-radius: 16px;
    }
}
@media (max-width: 768px){
    .float-menu {
        display: flex;
        transform: translate(-50%, 0);
    }
    .btn-up {
        bottom: 64px;
    }
    .dlc {
        display: none;
    }
    .menu-search {
        max-width: unset;
    }
    .bonus-page {
        padding: 16px;
    }
    .textpage {
        padding: 32px;
    }
    .toggle {
        cursor: pointer;
        pointer-events: auto;
        font-size: 1rem;
    }
    .footer_sub_menu {
        display: none;
        padding-left: 1em!important;
    }
    .rotate {
        display: block;
    }
    .langButton {
        display: none;
    }
    .no-decor {
        text-decoration: none!important;
    }
    .rotateArrow {
        display: block!important;
        text-align: right!important;
    }
    .toggle i::before {
        position: absolute;
        transition: transform .2s;
        transform: rotate(0);
        top: 1em;
        font-size: .8em;
    }
    .rotate.toggle i::before {
        transform: rotate(180deg);
    }
    .social_link a img {
        width: 2.4rem;
        height: 2.4rem;
    }
    .landing_body.wo_full_item {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .landing_body {
        gap: 1rem;
    }
    .lb_item_full {
        grid-column: 1 / 3;
    }
    .lb_item_full .stamp {
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: 75%;
        height: auto;
    }
    .lb_item_full button {
        top: unset;
        right: unset;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }
    .lb_item.last {
        display: block;
    }
    .td-game .tourpagebtns, .td-game .tourpagebtns-act {
        display: none !important;
    }
    .tourpagebtns-mobile {
        display: block;
    }
    .td-games {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .td-games-container {
        text-align: center;
    }
    .reg-container {
        display: none;
    }
    .landing-wof {
        display: none;
    }
    .landing_routes {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .lr_route.last {
        display: block;
    }
    .landing-main-body {
        flex-direction: column;
        align-items: center;
    }
    .landing-content {
        text-align: center;
    }
    .landing-content p {
        display: none;
    }
    .landing-text-mobile {
        display: block;
        text-align: center;
        font-size: clamp(1rem, 2rem, 3rem);
        font-weight: bold;
        padding: 1rem;
    }
    .partner-container {
        justify-content: center;
    }
    .landing-images {
        align-items: center;
    }
    .depo-end {
        align-self: unset;
    }
    .partner-lch {
        width: 100%;
    }
    .btn-next, .btn-prev {
        display:none !important;
    }
    .tour-detail-page {
        flex-direction: column;
    }
    .tournament-page {
        padding: 1rem;
    }
    .tour-detail-img {
        width: 80%;
        max-width: unset;
        margin: 0 auto;
    }
    .tour-detail-inner {
        align-items: center;
        order: 1;
    }
    .tour-timer {
        margin-bottom: 1rem;
    }
    .tournament-container {
        padding: 0;
    }
    #modalPromotions {
        padding: 0 !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #modalPromotions::-webkit-scrollbar {
        display: none;
    }
    #modalPromotions .modal-dialog {
        margin: 0 !important;
        max-width: unset !important;
        min-height: 100%;
    }
    #modalPromotions .modal-dialog .modal-content {
        min-height: 100%;
    }
    .promo-categories {
        justify-content: start !important;
    }
    .landing_banner {
        background: url("https://gana777.mx/resources/Bg_new_woplaynow_2.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .landing_banner_amount {
        margin-bottom: 0;
    }
    .landing_banner_container {
        justify-content: unset;
    }
    .landing_banner_steps {
        flex-direction: column;
        align-self: center;
    }
    .landing_banner_girl {
        position: relative;
        left: unset;
    }
    .step.second span {
        left: unset;
        right: -10px;
    }
    .step button {
        padding: .25rem 1rem;
    }
    .step p, .step button {
        font-size: 1rem;
    }

    .main_header_menu {
        display: none;
    }
    .main_header_menu > svg {
        width: 28px !important;
        height: 28px !important;
    }
    .landinfo {
        padding: 0;
    }
    .footer_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        margin: 0 auto;
        order: 3;
    }
    .senator_group {
        align-items: center;
    }
    .senator_group > span {
        padding-left: 0;
    }
    .footer_info > img {
        margin: 0 !important;
    }
    .copyright {
        order: 2;
    }
    .senator_group > img {
        width: 100%;
    }
    .menu_caret {
        display: block;
    }
    .footer_menu_item {
        gap: 8px;
    }
    .footer_menu {
        flex-direction: column;
    }
    .footer_icons {
        flex-direction: column;
    }
    .infoheight {
        width: 100%}
    .fa-angle-down {
        display: block!important;
    }
    .menu_links {
        padding-left: .5rem;
    }
    .link-menu {
        display: none;
    }
    .landing-game-grid {
        grid-auto-columns: calc((100% - 2 * 16px)/ 3);
    }
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
    #ribbon1:after, #ribbon2:after {
        content: none !important;
    }
    #ribbon1, #ribbon2 {
        width: unset !important;
        transform: unset !important;
        top: 30px !important;
        left: 0 !important;
        overflow: visible;
        line-height: .5rem;
        box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
        font-size: 1rem;
    }
    #ribbon1 span {
        display: grid;
        place-content: center;
        padding: 0 .5rem;
        position: relative;
        background: orange;
        overflow: visible;
        height: 30px;
        color: #fff;
        text-decoration: none;
    }
    #ribbon2 span {
        display: grid;
        place-content: center;
        padding: 0 .5rem;
        position: relative;
        background: var(--main-yellow);
        overflow: visible;
        height: 30px;
        color: #000;
        text-decoration: none;
    }
    #ribbon1 span:before {
        content: "";
        height: 0;
        width: 0;
        display: block;
        position: absolute;
        top: 0;
        right: -15px;
        border-top: 15px solid orange;
        border-bottom: 15px solid orange;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
    }
    #ribbon2 span:before {
        content: "";
        height: 0;
        width: 0;
        display: block;
        position: absolute;
        top: 0;
        right: -15px;
        border-top: 15px solid var(--main-yellow);
        border-bottom: 15px solid var(--main-yellow);
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
    }
    .footer-sponsor img {
        width: 40px;
        height: 40px;
    }
    .footer-sponsor .luchalibreaaa {
        height: 32px;
    }
}
@media (max-width: 599px){
    .birthdaysvg {
        display: none;
    }
    .birthdaysvg ~ select:invalid ~ label {
        left: 12px !important;
    }
    .input-group .col svg ~ select {
        padding-left: 12px;
    }
    .main_header_user .main_button, .main_header_user .sec_button {
        padding: 4px 16px;
    }
    .main_header_tabs {
        display: none;
    }
    .jpgame {
        font-size: var(--font2);
    }
    .landing_banner {
        padding: 1rem 2rem 0;
    }
    .landing_banner_steps {
        min-width: 60%;
    }
    .step {
        min-width: unset;
        padding: .5rem 1rem;
    }
    .step.first {
        max-width: unset;
    }
    .step p, .step button {
        font-size: .75rem;
    }
    .landing-description-boxes {
        grid-template-columns: 1fr;
    }
    .casino-tour.next, .casino-tour.prev {
        display: none;
    }
    .casino-tour {
        flex-direction: column;
    }
    .tour-details {
        align-items: center;
        order: 1;
    }
    .tour-list {
        height: 470px;
    }
    .tour-list .ct-inner {
        flex-direction: column;
    }
    .nav-bar-footer-panel {
        margin: 0 3.5rem;
    }
    #AccountInformation {
        display: none;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .gameText {
        font-size: calc(3vw);
    }
    .slide img {
        border-radius: 12px;
    }
    .landing-game-grid {
        grid-auto-columns: calc((100% - 16px)/ 2  - 16px);
    }
    .slider-img-box .banner-number {
        margin: -.2rem 0 0;
        text-shadow: .18rem .18rem #000;
    }
    .slider-img-box .banner-text {
        text-shadow: .08rem .08rem #000;
    }
    .loader-container {
        padding: 16px 16px 32px !important;
    }
    .WOFcircle {
        width: 30em;
        height: 30em;
    }
    #WOFcontainer {
        height: 16em;
    }
    .WheelOfFortune {
        top: 80%;
        left: 20%;
        transform: translate(-50%,-50%) rotate(30deg);
    }
    #WOFspin {
        transform: translate(-50%,-50%) rotate(-30deg);
    }
    .popmsgicon {
        left: 50%;
        transform: translate(-50%, 0);
    }
    .popup-msg .modal-header .header-title {
        margin-top: 1.2rem;
    }
}