#logo-text, .chatbtnM {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.chatbtnM, .wrapper, body {
    position: relative;
}
.select-items, :root {
    scrollbar-width: thin;
}
.chatbtnM, .menu-desktop, .nav-bar-footer-item, .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;
}
:root {
    --elem-color: #5a71ca;
    --text-color: #adbff6;
    --button-text: #d5dffa;
    --g777-yellow: #ffd128;
    --bg-color: #020235;
    --bg-light: #203290;
    --bgfootermenu: #142682;
    --plchldr: #5a71ca;
    --footermenu-color: #ffffff;
    scrollbar-color: var(--g777-yellow) var(--bg-color);
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
}
button {
    cursor: pointer;
}
body {
    width: 100%;
    margin: 0 auto;
    background-color: var(--main-darker);
    overflow-x: hidden!important;
}
#divGP, .sidenav {
    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;
}
.basic-000, .dropdown-item, .input-group input[type=date], .input-group input[type=email], .input-group input[type=number], .input-group input[type=password], .input-group input[type=tel], .input-group input[type=text], .menu-desktop a {
    color: #fff;
}
.beYellow, .menu-desktop a:hover, .terms h1, .terms h2 {
    color: var(--g777-yellow);
}
.menu .flickity-viewport {
    width: 100%;
    overflow: initial;
}
.menu .flickity-prev-next-button.next {
    right: 0;
    width: 50px;
    height: 100%;
    border-radius: 0;
    background-color: #203290;
    box-shadow: -1px 0 5px #00000080;
    color: #fff;
}
.menu .flickity-prev-next-button.previous {
    left: 0;
    width: 45px;
    height: 100%;
    border-radius: 0;
    background-color: #203290;
    box-shadow: 0 1px 5px #00000080;
    color: #fff;
}
.custom-select select, .menu .flickity-page-dots, .menu .flickity-prev-next-button.next:disabled, .menu .flickity-prev-next-button.previous:disabled, .non-display, .only-for-mobile, .rotate, .select-hide {
    display: none;
}
.menu .flickity-button-icon {
    padding: 8px 0;
}
#logo-text {
    padding-left: 1em;
    font-weight: 900;
    font-size: 1.2em;
    color: #ffc808;
    display: inline;
}
.small-font {
    font-size: .8em;
}
@media (min-width:200px) {
    #logo-text, .dmenu-text {
    display: none;
}
.first-menu {
    margin-left: 0;
}
}@media (min-width:400px) {
    #logo-text, .dmenu-text, .first-menu {
    display: none;
}
.first-menu {
    margin-left: 0;
}
}@media (min-width:768px) {
    .dmenu-text {
    display: none;
}
.first-menu {
    display: flex;
    margin-left: -2em;
}
.sfpay {
    width: 25vw;
}
}@media (min-width:990px) {
    #logo-text {
    display: none;
}
.first-menu {
    margin-left: -2em;
}
.dmenu-text {
    display: block;
}
}@media (min-width:1130px) {
    #logo-text {
    display: inline;
}
.dmenu-text {
    display: block;
}
}@media (min-width:1278px) {
    #logo-text {
    display: inline;
}
.dmenu-text {
    display: inline-block;
}
}@media (min-width:1919px) {
    #logo-text {
    display: inline;
}
.dmenu-text {
    display: inline-block;
}
}::-webkit-scrollbar-thumb {
    background: #2c43a8;
}
.datetator_element {
    color: var(--elem-color);
    border: 1px solid var(--elem-color);
    background-color: transparent;
    border-radius: 5px;
    margin-top: .5rem;
    padding: 10px!important;
    width: 240px!important;
    font: 400 16px/25px Arial;
    outline: 0;
}
.chatbtnM, .login-btn, .nav-link, .register-btn, h1, h2, h3, h4, h5 {
    font-weight: 700;
}
.footer_background, footer {
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media only screen and (min-width:300px) and (max-width:410px) {
    .navbar-brand {
    margin-right: 0!important;
}
}@media only screen and (min-width:200px) and (max-width:768px) {
    .desktop-lang {
    display: none!important;
}
}.fa-style {
    color: #818cd2;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 50px;
}
.modal-body {
    padding-top: 0;
}
.login-btn {
    border: 2px solid var(--elem-color);
    background-color: #081050;
}
.chatbtnM, .nav-bottom-border, .register-btn {
    background-color: #ffd128;
}
.register-btn {
    color: #081050;
}
.nav-link {
    color: #9aabe8;
    padding: 0;
}
.menu-selected > svg, .menu-selected > span {
    fill: var(--main-yellow)!important;
    color: var(--main-yellow)!important;
    font-style: italic!important;
}
.menu-selected:active {
    background-color: transparent!important;
    border: 0!important;
}
.chatbtnM {
    color: #00008b;
    padding: 1.5rem 1.6rem 1.6rem;
    left: 1.5rem;
    bottom: 5.2rem;
    -moz-border-radius: 50% 50% 50% 0;
    -webkit-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
    z-index: 99;
    width: 2.8em;
    height: 2.8em;
}
.bnnrCont, .menuBg {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
}
.glow, .glow:hover {
    text-shadow: 1px 1px 20px #ff6857;
}
.langImg {
    margin-right: 1rem;
}
.langFontW {
    font-weight: 500;
}
.p1, .p2, .p3, .p4 {
    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;
}
.login-input {
    background-color: transparent;
    color: var(--elem-color);
}
.divider {
    width: 60%;
    margin: auto;
}
.social {
    color: #adbff6;
    font-size: 40px;
    margin-left: 20px;
}
.fa-icons, .p1, .p2, .p3, .p4, .p5, h1, h2, h3, h4, h5 {
    color: #fff;
}
.footer_background {
    background-image: url(../images/footer_bg.jpg);
    padding: 2%;
    background-color: #0a006f;
}
h1 {
    font-size: 1.2rem;
}
h2 {
    font-size: 1.1rem;
}
h3 {
    font-size: 1rem;
}
h4 {
    font-size: .9rem;
}
h5 {
    font-size: .8px;
}
.p1 {
    font-size: 18px;
}
.p2 {
    font-size: 14px;
}
.p3 {
    font-size: 12px;
}
.p4 {
    font-size: 11px;
}
.p5 {
    font-weight: 700;
    font-size: 10px;
}
.fa-icons {
    font-size: 25px;
    padding: 10px;
}
.brand-200, .fa-cc-mastercard, .fa-cc-visa, .fa-icons:hover {
    color: #adbff6;
}
.fa-close, .fa-close:active, .fa-close:focus {
    color: #fff;
    padding: 5px 7px 6px;
    border-radius: 5px;
    font-size: 25px;
}
.fa-close:hover {
    background-color: #203290;
    font-size: 25px;
}
.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);
}
}.primary-btn, .warning-btn, .warning-btn:active, .warning-btn:focus {
    background-color: var(--main-yellow);
    color: #20318e;
    padding: 10px 30px;
    border: none;
    outline: 0;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
    border: 1px solid var(--main-blue);
}
.primary-btn:focus {
    background-color: var(--main-yellow);
    opacity: .97;
    color: #20318e;
    padding: 10px 30px;
    border: none;
    outline: 0;
    font-weight: 700;
    border: 1px solid var(--main-blue);
}
.disabled-primary-btn, .disabled-primary-btn:active, .disabled-primary-btn:focus {
    opacity: .6;
    cursor: not-allowed;
    background-color: var(--elem-color);
    color: #a5b6e4;
    padding: 10px 30px;
    border: none;
    outline: 0;
    border-radius: 50px;
    font-weight: 700;
}
.secondary-btn, .secondary-btn:active, .secondary-btn:focus {
    background-color: #fff;
    color: #20318e;
    padding: 10px 30px;
    border: none;
    outline: 0;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
    border: 1px solid var(--main-blue);
}
.tertiary-btn, .tertiary-btn:active {
    background-color: var(--main-blue);
    color: white;
    padding: 10px 30px;
    border: 1px solid var(--main-blue);
    outline: 0;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
}
.game-btn, .game-btn-selected {
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}
.game-btn, .tertiary-btn:focus {
    border: 1px solid var(--elem-color);
    outline: 0;
    font-weight: 700;
}
.tertiary-btn:focus {
    padding: 10px 30px;
}
.tertiary-btn-collapsed {
    border: none;
    color: #fffa78;
}
.game-btn {
    background-color: red;
    color: #d5dffa;
    border-radius: 50px;
}
.game-btn-selected, .game-btn:focus {
    border: 1px solid var(--elem-color);
    outline: 0;
}
.game-btn-selected {
    background-color: #d5dffa;
    color: #2c43a8;
    border-radius: 20px;
    font-weight: 700;
}
.paginate-btn, .paginate-btn:hover {
    width: 60px;
    border: 1px solid var(--elem-color);
    font-weight: 700;
    padding: 10px;
    outline: 0;
}
.paginate-btn {
    background-color: #2c43a8;
    color: #d5dffa;
    border-radius: 8px;
}
.checkmark, .markcheck {
    height: 25px;
    width: 25px;
    left: 0;
    top: 0;
}
.paginate-btn:focus {
    outline: 0;
}
.paginate-btn-selected {
    background-color: #e9cd28;
    color: #172578;
    outline: 0;
}
.paginate-btn:hover {
    background-color: #203290;
    color: #d5dffa;
    border-radius: 8px;
}
.tertiary-btn:hover {
    background-color: #162478;
    color: #d5dffa;
    padding: 10px 30px;
    border: 1px solid var(--main-blue);
    outline: 0;
    font-weight: 700;
}
.primary-btn:hover, .warning-btn:hover {
    background-color: #e9bc17;
    color: #20318e;
    border: 1px solid var(--main-blue);
    outline: 0;
    font-weight: 700;
}
.primary-btn, .tertiary-btn, .secondary-btn {
    position: relative;
    overflow: hidden;
}
.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);
  }
}
.secondary-btn:hover {
    background-color: #f1eded;
    color: #20318e;
    outline: 0;
    font-weight: 700;
    border: 1px solid var(--main-blue);
}
.glow:hover {
    color: #d2b103;
}
input[type=checkbox] {
    width: 20px;
    height: 20px;
    outline: 2px solid var(--elem-color);
    border-radius: 5px;
}
.brand-100, .table .sort-arrow i:active {
    color: #d5dffa;
}
.brand-300 {
    color: #7f96e4;
}
.brand-400, select {
    color: var(--elem-color);
}
.brand-500 {
    color: #2c43a8;
}
.brand-600 {
    color: #203290;
}
.brand-700 {
    color: #142682;
}
.brand-800 {
    color: #0a006f;
}
.success-100 {
    color: #e6fad2;
}
.success-200 {
    color: #c8f5a6;
}
.success-300 {
    color: #9be375;
}
.success-400 {
    color: #70c74f;
}
.success-500 {
    color: #3aa320;
}
.success-600 {
    color: #258c17;
}
.success-700 {
    color: #157510;
}
.success-800 {
    color: #0a5e0c;
}
.success-900 {
    color: #064e0d;
}
.danger-100 {
    color: #f9ded1;
}
.danger-200 {
    color: #f3b9a5;
}
.danger-300 {
    color: #dc8472;
}
.danger-400 {
    color: #ba534a;
}
.danger-500 {
    color: #8c1c1d;
}
.danger-600 {
    color: #7e101c;
}
.danger-700 {
    color: #640e1d;
}
.danger-800 {
    color: #51081c;
}
.danger-900 {
    color: #43051b;
}
.warning-100 {
    color: #fefacc;
}
.warning-200 {
    color: #fef49a;
}
.warning-300 {
    color: #fcea67;
}
.warning-400 {
    color: #f9e142;
}
.warning-500 {
    color: #ffd128;
}
.warning-600 {
    color: #e9bc17;
}
.warning-700 {
    color: #b09102;
}
.warning-800 {
    color: #8e7301;
}
.warning-900 {
    color: #755d00;
}
.basic-100 {
    color: #f1eded;
}
.basic-200 {
    color: #d3d1d1;
}
.basic-300 {
    color: #a8a4a4;
}
.basic-400 {
    color: #686565;
}
.basic-500 {
    color: #303030;
}
.login-input {
    border-right: none;
    outline: 0;
}
.input-group-text {
    background: 0 0;
    border: 1px solid var(--elem-color);
    border-left: none;
    color: #fff;
}
.checkmark, .main-section {
    background-color: #081050;
}
.checkbox-container, .radio-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    border: 1px solid var(--elem-color);
    border-radius: 50%;
}
.radio-container:hover input~.checkmark {
    background-color: #fff;
    border: 1px solid #203290;
}
.radio-container input:checked~.checkmark {
    background-color: #0a006f;
    border: 6px solid #fff;
}
.checkmark:after, .markcheck:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked~.markcheck:after, .radio-container input:checked~.checkmark:after, .segmented-btn:focus .segmented-border, .splogo {
    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;
    height: 0;
    width: 0;
}
.markcheck {
    position: absolute;
    border-radius: 6px;
    border: 1px solid var(--elem-color);
}
.checkbox-container:hover input~.markcheck {
    background-color: transparent;
    border: 2px solid #203290;
}
.checkbox-container input:checked~.markcheck {
    background-color: #fff;
    border: 2px solid #203290;
}
.checkbox-container .markcheck:after {
    left: 7px;
    top: 5px;
    width: 6px;
    height: 10px;
    border: solid #0a006f;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.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, .usermenu {
    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;
}
input, input[type=date], input[type=email], input[type=number], input[type=password], input[type=text] {
    background-color: transparent;
    border: 1px solid var(--elem-color);
    padding: 10px;
}
input::placeholder, input[type=date]::placeholder, input[type=email]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=text]::placeholder {
    /*color: var(--plchldr);*/
}
input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=text]:focus {
    outline: white solid 0;
    background-color: transparent;
    border: 2px solid var(--elem-color);
    padding: 10px;
    border-radius: 5px;
}
input[type=email]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=password]:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) {
    background-color: transparent;
}
input[type=email]:valid, input[type=number]:valid, input[type=password]:valid, input[type=text]:valid {
    background: 98%/20px no-repeat;
}
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
::placeholder {
    color: var(--plchldr);
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--plchldr);
}
::-ms-input-placeholder {
    color: var(--plchldr);
}
.bank, .bank input, select form-control {
    border: 1px solid var(--elem-color);
    color: #000;
}
.form-control, .input-group {
    box-shadow: none !important;
}
#mobile-language, .sidenav a {
    text-decoration: none;
    color: #8191ca;
    display: block;
    margin-right: 10px;
}
.modal-body, .modal-header, .noborder {
    border: 0;
}
.sidenav::-webkit-scrollbar-track {
    border-radius: 50px;
    background: #7f96e4;
}
.sidenav::-webkit-scrollbar-thumb {
    background: #2c43a8;
    border-radius: 10px;
}
.sidenav {
    height: 100%;
    width: 270px;
    position: fixed;
    z-index: 101;
    top: 0;
    right: -270px;
    background-color: #081050;
    transition: .5s;
    padding-top: 2em;
    overflow: auto;
}
.custom-select, .table th {
    position: relative;
    border: 0;
}
#mobile-language, .sidenav a, .usermenu {
    font-size: 15px;
    transition: .3s;
}
.sidenav a {
    padding: 8px 8px 8px 32px;
    margin-left: -15px;
}
#mobile-language {
    padding: 8px 8px 8px 15px;
    margin-left: 0;
    border: none;
    outline: 0;
}
#mobile-language:hover {
    color: #000453;
    background-color: #fff;
    border-radius: 0 30px 30px 0;
}
.collapse-link:hover {
    color: #000453;
    background-color: #fff;
    margin-left: -26px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.sidenav .closebtn {
    font-size: 36px;
    margin-right: 30px;
    margin-top: -47px;
    float: right;
}
.table {
    width: 100%;
    background: 0 0;
    border: 0;
}
.table th {
    color: #fff;
    background-color: #142682;
    width: 25%;
    height: 70px;
}
.table td {
    color: #adbff6;
}
.table th span {
    position: absolute;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.table tr:hover {
    background-color: #203290;
    cursor: pointer;
}
.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;
}
.custom-select {
    font-family: Arial;
    padding: 0;
}
.select-selected {
    border: 1px solid #7f96e4;
    border-radius: 5px;
}
.select-selected:after {
    position: absolute;
    content: "";
    top: 20px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent;
}
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff;
    top: 14px;
}
.select-items div, .select-selected {
    background-color: #081050;
    color: #7f96e4;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}
.select-items {
    position: absolute;
    background-color: #1e90ff;
    border: 1px solid #7f96e4;
    border-radius: 5px;
    top: 130%;
    left: 0;
    right: 0;
    z-index: 99;
    height: 200px;
    overflow: auto;
}
.select-items::-webkit-scrollbar {
    width: 5px;
}
.select-items::-webkit-scrollbar-track {
    border-radius: 50px;
    background: #7f96e4;
}
.same-as-selected, .select-items div:hover {
    background-color: rgba(0, 0, 0, .1);
}
.same-as-selected {
    color: #fff!important;
    background: url(../images/check-circle-regular.svg) 30%/20px no-repeat;
}
.custom-option {
    padding-left: 30px;
}
@media screen and (max-height:450px) {
    .sidenav a {
    font-size: 18px;
}
}.logged-in {
    display: none;
    -webkit-appearance: none;
}
.flickity-page-dots .dot {
    border: 2px solid var(--g777-yellow);
    width: 20px;
    height: 20px;
    margin: 0 10px;
    background: var(--bg-color);
    border-radius: 50%;
    opacity: .8;
}
.flickity-page-dots .is-selected {
    background: var(--g777-yellow);
    border: 2px solid var(--bg-color);
}
::-webkit-scrollbar {
    width: 5px;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: var(--g777-yellow);
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
}
.usermenu, .usermenu:hover {
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}
.usermenu {
    text-decoration: none!important;
    background-color: transparent;
    color: #8191ca;
    display: block;
}
.banner-btn a, .dropdown-menu a, .mylog, .nav-bar-footer-item, .payment_option, .social_link a, .toggle {
    text-decoration: none;
}
.usermenu:hover {
    background-color: #fff;
    color: #000453;
    margin-left: -1.6em;
    padding-left: 2.5em!important;
    transform: translateX(-.45em);
}
.banner-slider .flickity-slider, .banner-slider .flickity-viewport, .banner-slider.main-carousel {
    height: 24.29vw!important;
}
.banner-slider .carousel-cell {
    background-color: #00000050;
    width: 100%;
    height: 24.29vw!important;
    overflow: hidden;
}
.banner-slider .flickity-page-dots {
    bottom: 5%}
.banner-img {
    margin-left: 50%;
    transform: translate(-50%);
}
.slider-img-box {
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: initial;
}
.slider-img-box-left {
    left: 10%}
.slider-img-box-right {
    right: 10%}
.slider-img-box .banner-number {
    font-size: 6vw;
    margin: -.8rem 0 0;
    font-weight: 700;
    text-shadow: .18rem .18rem #000;
    line-height: 1.2;
}
.slider-img-box .banner-text {
    font-size: 3vw;
    margin: 0;
    font-weight: 700;
    text-shadow: .125rem .125rem #000;
    line-height: 1.2;
}
.slider-img-box .banner-btn {
    font-size: 1.75vw;
    font-weight: 600;
    background-color: var(--g777-yellow);
    color: var(--bgfootermenu);
    margin-top: 1.2vw;
    padding: .8vw 1.6vw;
    border-radius: 50px;
}
.slider-img-box .banner-btn:hover {
    background-color: #e9bc17;
}
@media (max-width:599px) {
    .banner-slider .flickity-page-dots {
    display: none;
}
.banner-slider .carousel-cell, .banner-slider .flickity-slider, .banner-slider .flickity-viewport, .banner-slider.main-carousel {
    height: 33.29vw!important;
}
.slider-img-box .banner-number {
    font-size: 9vw;
    margin: -.2rem 0 0;
    text-shadow: .18rem .18rem #000;
}
.slider-img-box .banner-text {
    font-size: 4vw;
    text-shadow: .08rem .08rem #000;
}
.slider-img-box .banner-btn {
    font-size: 3.6vw;
    padding: 1.2vw 2.4vw;
}
}@media (min-width:600px) {
    .banner-slider .flickity-page-dots {
    display: inline-block;
}
.banner-slider .carousel-cell, .banner-slider .flickity-slider, .banner-slider .flickity-viewport, .banner-slider.main-carousel {
    height: 24.29vw!important;
}
.slider-img-box .banner-number {
    font-size: 6vw;
    margin: -.8rem 0 0;
}
.slider-img-box .banner-text {
    font-size: 3vw;
}
.slider-img-box .banner-btn {
    font-size: 1.75vw;
    padding: .8vw 1.6vw;
}
}.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;
}
.menu-mob-svg {
    color: #8191ca;
    fill: #8191ca;
    height: 24px;
}
.nav-bar-footer-item, .nav-bar-footer-item-txt, .nav-bar-footer-panel {
    -webkit-text-size-adjust: 100%;
    font-family: Inter, sans-serif;
    color: var(--footermenu-color);
    box-sizing: border-box;
}
.menu-mob-svg:active, .menu-mob-svg:hover {
    color: #9aabe8;
    fill: #9aabe8;
}
.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;
    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-item {
    background-color: transparent;
    cursor: pointer;
    position: relative;
    font-weight: 700;
    display: flex;
    align-items: center;
    line-height: 24px;
    min-height: 25px;
    font-size: 14px;
    justify-content: center;
    width: fit-content;
    flex-direction: column;
    margin: 0;
    height: inherit;
    padding: 0 5px;
}
.nav-bar-footer-item-txt {
    cursor: pointer;
    text-align: center;
    line-height: 14px;
    font-size: 11px;
    font-weight: 500;
}
.modal-header p.modal-title, .terms, .terms li {
    color: var(--text-color);
}
.non-visible {
    visibility: hidden;
}
.bnnrCont {
    margin-top: 0px;
}
.btnUpEnd {
    background: var(--main-darker);
    overflow: hidden;
}
.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;
}
.btnrradius {
    border-top-right-radius: 30px!important;
    border-bottom-right-radius: 30px!important;
}
.mylog {
    font-weight: lighter;
}
.mobile_footer {
    height: 24px;
    fill: var(--footermenu-color);
}
#modalPleaseWaitFullCover, .modal-loader {
    z-index: 3001;
    background-color: #202020;
}
#bBack, #bHead, #homebtn {
    background-color: var(--main-yellow);
}
.logged-out-button, .onlysm {
    min-width: 5.2rem;
    font-size: .75rem;
}
.logged-in-button {
    min-width: 8em;
    display: none;
}
.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;
}
@media only screen and (max-width:400px) {
    .nav-logo {
    width: 30px;
}
.navbar-toggler, .navbar-toggler:focus {
    padding: 0;
    border: none;
    outline: 0;
}
.navbar {
    border-top: 0;
    border-bottom: 3px solid var(--g777-yellow);
    background-image: url("../images/menu_bg.png");
    background-size: cover;
    background-position: center;
    background-color: #0b0871;
}
.hamburger_menu {
    margin: 0 .5em;
}
}.hamburger_menu {
    font-size: 16px;
    cursor: pointer;
}
footer {
    background-image: url("./assets/images/footer_bg.jpg");
    margin-top: -1em;
}
.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(--g777-yellow)!important;
}
.payment {
    padding: 0 1.5em;
}
.payment_option {
    font-size: 2.2em;
    color: #adbff6;
    text-align: center;
}
.payment_option:last-child {
    top: -5px;
}
.legal_age {
    padding-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.legal_age_text {
    color: #fff;
    font-size: .8em;
    padding-bottom: 1em;
}
.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;
}
.copyright {
    color: #fff;
    font-size: .8em;
    margin: 0;
}
.recommended_text {
    color: #fff;
    font-size: 1rem;
    margin-top: 0;
}
@media only screen and (max-width:767px) {
    .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;
}
}@media only screen and (max-width:319px) {
    #logo-text, .logged-out-button {
    display: none!important;
}
}@media only screen and (max-width:1141px) {
    .logged-in span.h6 {
    display: none;
}
}
/*.terms h4 {
    font-size: 1.3rem;
}*/
.terms h5 {
    font-size: 1.1rem;
}
.terms a, .terms p, .terms span {
    /*color: var(--text-color);*/
    text-decoration: none;
}
.terms ul {
    margin-left: 1em;
}
.terms-table {
    table-layout: fixed;
}
.landinfo {
    color: #fff;
    font-size: .8em;
    line-height: 1.2em;
    list-style: none;
    /*-webkit-mask-image: linear-gradient(180deg, #000 85%, transparent);*/
    overflow: auto;
    height: 10rem;
}
.landinfo h1, .landinfo h2 {
    font-size: 1em;
}
@media only screen and (min-width:1550px) {
    .footer_main_menu {
    position: relative;
    left: 3em;
}
}@media only screen and (min-width:992px) and (max-width:1549px) {
    .footer_main_menu {
    position: relative;
    left: 1em;
}
}
#bBack, #bHead {
    position: absolute;
}
.fa-chevron-circle-up {
    font-size: xxx-large;
    font-size: -webkit-xxx-large;
}
.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;
}
.card-button, .catdrop, .dropdown-menu {
    background-color: #081050;
}
.scrollmenu::-webkit-scrollbar {
    display: none;
}
.search .icon, .search .input {
    display: flex;
    justify-content: center;
}
#bBack {
    z-index: 1;
    margin-top: -19px;
    color: #000;
    border-radius: 2px 19px 19px 2px;
}
#bHead {
    z-index: 1;
    margin-top: 3px;
    color: #000;
    border-radius: 19px 2px 2px 19px;
}
.fa-chevron-left, .fa-chevron-right {
    right: 50%;
    bottom: 50%;
    transform: translate(50%, 50%);
    position: absolute;
}
.card-button {
    position: relative;
    border: 1px solid #d5dffa;
    font-weight: 600;
    margin: 0 4px;
}
.smbtn {
    color: #fff;
    border-radius: 17px;
    height: 34px;
    padding: 4px 25px;
}
.smbtn:active, .smbtn:focus, .smbtn:hover {
    background-color: #d5dffa;
    color: #000;
}
#homebtn {
    color: #081050;
    border: 1px solid #081050;
}
#homebtn:hover {
    opacity: .9;
}
.fa-home {
    padding-right: 7px;
}
.catdrop {
    padding: .25rem 1.5rem;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #d5dffa;
    font-weight: 600;
}
.dropdown-menu {
    display: none;
    position: absolute;
    overflow: auto;
    border: 1px solid #000;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
.dropdown-menu::-webkit-scrollbar {
    width: 5px;
    border-radius: 4px;
    background: var(--main-dark);
}
.dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--g777-yellow);
    border-radius: 4px;
}
.dropdown-menu::-webkit-scrollbar-track {
    border-radius: 10px;
}
.dropdown-menu a {
    color: #fff;
    padding: 5px;
    display: block;
}
.dropdown-menu a:hover {
    background-color: #ffd128;
    color: #000;
}
#groupsDropDownContainer {
    padding: 1rem;
    gap: 1rem;
    align-items: center;
}
#groupsDropDownContainer .dropdown-item:hover {
    background-color: var(--main-yellow)!important;
    color: var(--main-darker)!important;
}
#divGP {
    margin-top: 40px;
    height: 320px;
    overflow-y: auto;
    z-index: 10;
    padding: 0;
    border: 0;
    background-color: var(--main-darker);
}
#gameFrame, .gameName, .search, .winSlider {
    overflow: hidden;
}
.search-box {
    height: 44px;
    background-color: #203290;
}
.search, .search .icon {
    background: var(--modal-bg);
    border-radius: 44px;
    z-index: 2;
    height: 44px;
}
.search {
    position: relative;
    float: right;
    width: 300px;
    transition: .5s;
    box-shadow: 0 0 0 3px var(--main-darker);
}
.search .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    align-items: center;
    cursor: pointer;
}
#gameFrame, .search .input input {
    position: absolute;
    height: 100%;
    border: none;
    top: 0;
    width: 100%}
.search .input {
    position: relative;
    width: 220px;
    height: 44px;
    left: 44px;
    align-items: center;
}
.search .input input {
    outline-color: #d5dffa;
    padding: 10px 0;
    color: #000;
}
.search .input input::placeholder {
    color: #000;
}
.clear-icon {
    position: absolute;
    display: block;
    left: 16px;
    z-index: 999;
    top: 10px;
}
.myAccountInputField:focus+.myAccountInputLabel, .myAccountInputField:not(:placeholder-shown)+.myAccountInputLabel, .selectInputLabel {
    color:  black;
    opacity: 1;
    z-index: 9;
}
#clearSearchIcon {
    display: none;
    cursor: pointer;
}
#gameSearchText {
    color: #fff;
    font-size: 1.2rem;
    padding-top: 1em;
}
#gameTitle {
    color: #fff;
    font-size: 1.5rem;
    padding-top: 1em;
}
#gamesfiltered {
    margin-top: -5em;
    block: right;
}
#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;
}
@media only screen and (max-width:1240px) {
    .search {
    width: 44px;
}
.search-box {
    width: 40px;
}
.search.active {
    width: 300px;
}
}@media only screen and (max-width:768px) {
    .footer_background {
    margin-bottom: 53px;
}
.search.active {
    width: 97vw;
}
}@media only screen and (max-width:425px) {
#groupsDropDownContainer .dropdown-item {
    width: 100%!important;
}
.search.active {
    width: 95vw;
}
}.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-color);
    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-color);
    margin: 0 auto;
}
.modalcloser {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: var(--text-color);
}
.popup-msg .modal-body {
    color: var(--text-color);
    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-color);
    outline: 0;
    border-radius: 8px;
    font-weight: 700;
}
@media only screen and (max-width:576px) {
    .popmsgicon {
    left: 50%;
    transform: translate(-50%, 0);
}
.popup-msg .modal-header .header-title {
    margin-top: 1.2rem;
}
}.myAccountInputLabel, .myaccvalidatedLabel, .registerInputFieldLabel, .selectInputLabel {
    pointer-events: none;
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-blue);
}
.categoryItems {
    color: var(--main-yellow);
    font-size: 14px;
    width: 48%;
    display: inline;
    margin-bottom: 5px;
    height: 34px;
    border-radius: 17px;
    border: 2px solid var(--main-yellow);
    text-transform: uppercase;
    font-weight: bold;
}
.myAccountInputField:focus+.myAccountInputLabel, .myAccountInputField:not(:placeholder-shown)+.myAccountInputLabel, .myaccvalidatedLabel, .selectInputLabel {
    color: var(--main-blue);
    background: var(--modal-bg);
    transform: translateY(-160%);
    font-size: small;
    padding: 0 12px;
}
.groupNameText:not(:first-child) {
    margin-top: 3rem;
}
.gameName {
    text-overflow: ellipsis;
}
.myAccountInputLabel, .registerInputFieldLabel {
    transition: .2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.myAccountInputField:focus+.myAccountInputLabel, .myAccountInputField:not(:-ms-input-placeholder)+.myAccountInputLabel {
    color: var(--main-blue);
    opacity: 1;
    background: var(--modal-bg);
    transform: translateY(-160%);
    font-size: small;
    padding: 0 12px;
    z-index: 9;
}
.registerInputField:focus+.registerInputFieldLabel, .registerInputField:not(:placeholder-shown)+.registerInputFieldLabel {
    opacity: 1;
    background: var(--modal-bg);
    transform: translateY(-160%);
    font-size: small;
    padding: 0 12px;
    z-index: 9;
}
.registerInputField:focus+.registerInputFieldLabel, .registerInputField:not(:-ms-input-placeholder)+.registerInputFieldLabel {
    opacity: 1;
    background: var(--modal-bg);
    transform: translateY(-160%);
    font-size: small;
    padding: 0 12px;
    z-index: 9;
}
#registerInputPhone::placeholder, #phone::placeholder {
    color: var(--main-blue);
}
.iti__country-list {
    z-index: 12!important;
}
.myaccvalidatedLabel {
    z-index: 9;
}
.tooltip {
    z-index: 10001;
}
.banner-btn a {
    color: var(--bgfootermenu);
}
input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px var(--modal-bg) inset!important;
    -webkit-text-fill-color: var(--main-blue)!important;
}
.grid-container {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(auto, calc(16.5vw)));
    grid-auto-rows: calc((15.5vw + 25px)/ 1.48);
    grid-auto-flow: row dense;
    grid-gap: 40px;
    padding: 0;
}
.gameText {
    font-weight: 500;
    font-size: calc(1vw);
    display: block;
    text-shadow: .1rem .15rem .1rem rgba(0, 0, 0, .6);
}
@media (max-width:1278px) {
    .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(auto, calc(22vw)));
    grid-auto-rows: calc((19vw + 25px)/ 1.48);
    grid-gap: 30px;
}
.gameText {
    font-size: calc(1.5vw);
}
}@media (max-width:1016px) {
    .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(auto, calc(28vw)));
    grid-auto-rows: calc((26vw + 25px)/ 1.48);
    grid-gap: 20px;
}
.gameText {
    font-size: calc(2vw);
}
}@media (max-width:600px) {
    .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(auto, calc(42vw)));
    grid-auto-rows: calc((36vw + 25px)/ 1.48);
    grid-gap: 15px;
}
.gameText {
    font-size: calc(3vw);
}
.slide img {
    border-radius: 12px;
}
}@media (max-width:400px) {
    .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(auto, calc(44vw)));
        grid-auto-rows: calc((37vw + 25px)/ 1.48);
        grid-gap: 15px;
    }
    .gameText {
        font-size: .7rem;
    }
}
.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 {
    background-image: url('https://gana777.com/resources/wm_g777.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100px;
}
.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 {
    display: flex;
    justify-content: space-around;
}
.footer_menu_item {
    margin: 0 1rem 1rem;
}
.menu_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}
.menu_caret {
    display: none;
    transition: .1s;
    transform: rotate(180deg);
}
.menu_caret.showmenu {
    transform: rotate(0deg)!important;
}
.footer_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.fa-angle-down {
    display: none!important;
}
@media (max-width:768px) {
    .menu_caret {
        display: block;
    }
    .footer_menu {
        flex-direction: column;
    }
    .infoheight {
        width: 100%}
    .fa-angle-down {
        display: block!important;
    }
    .menu_links {
        padding-left: .5rem;
    }
    .link-menu {
        display: none;
    }

}@media (max-width:900px) {
    .footer_nav {
    display: block;
}
.infoheight {
    width: 100%}
}.menu_links, .showlinks {
    display: flex;
}
.menu_links {
    flex-direction: column;
    align-items: flex-start;
}
.menu_links a {
    display: inline;
    text-decoration: none!important;
    cursor: pointer;
}
.menu_links a:active, .menu_links a:focus, .menu_links a:hover {
    color: var(--g777-yellow)!important;
    transform: scale(1.05);
}
#gamesContainer {
    padding: 1rem 0;
}
.winCont {
    padding: 1rem 5rem;
}
.slideAnim {
    animation: 30s linear .1ms infinite move;
    -o-animation: 30s linear .1ms infinite move;
    -moz-animation: 30s linear .1ms infinite move;
    -webkit-animation: 30s linear .1ms infinite move;
}
.slide-track {
    display: inline-block;
}
.slide-track>* {
    display: inline-flex;
    height: 80px;
    border-radius: 12px;
    background-color: var(--main-dark);
    align-items: center;
    margin-right: 1rem;
}
.slide img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.slide>div {
    width: 100%;
    color: #fff;
    margin: 0;
    text-align: center;
}
@keyframes move {
    0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}@-o-keyframes move {
    0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}@-moz-keyframes move {
    0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}@-webkit-keyframes move {
    0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-50%);
}
}#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, .btn-up {
    display: none;
    position: fixed;
}
.fscontrols>i:hover {
    transform: scale(1.1);
}
#closefullscreen {
    top: 5px;
    z-index: 111;
}
@media (max-width:1200px) {
    .winCont {
    padding: 1rem;
}
#holder {
    width: 85vw;
}
.fscontrols {
    right: 4%}
}.btn-up {
    bottom: 0.5em;
    left: 0.5em;
    z-index: 99;
    padding: .6rem;
    font-family: Play, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--g777-yellow);
    background: rgba(0, 0, 0, 0);
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
#macloser {
    position: absolute;
    right: 1.5rem;
    color: #000;
    cursor: pointer;
}
.control {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: .5rem;
    position: relative;
    background: #d5d5d5;
    border-bottom-left-radius: 16px;
    overflow-x: hidden;
    -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;
    color: #000;
    width: 35%;
    z-index: 1;
}
.control-info {
    width: 65%; 
    padding: 0 1rem;
    overflow-y: scroll;
    overflow-x: hidden;
}
.control-info {
    scrollbar-color: var(--main-blue);
    scrollbar-width: thin;
    -webkit-scrollbar-color: var(--main-blue);
    -webkit-scrollbar-width: thin;
    -moz-scrollbar-color: var(--main-blue);
    -moz-scrollbar-width: thin;
}
.control-info::-webkit-scrollbar-thumb {
    background: var(--main-blue);
    border-radius: 5px;
}
.control-tab, .control-lang, .control-quit {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 12px;
    color: var(--main-blue) !important;
    height: 40px;
    margin-bottom: 5px;
    transition: .5s;
    padding-left: 0.5rem;
}
.control-tab svg, .control-quit svg {
    margin-right: 1rem;
}
.control-tab:hover, .control-lang:hover, .control-quit:hover, .control-tab.active {
    background: var(--modal-bg);
    transform: translate(8px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
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;
}
.accdiv-modal {
    width: 80%;
    height: 100%;
    border-radius: 16px;
    transition: .5s;
}
.logs-nav {
    display: flex;
    justify-content: space-around;
}
.loglink {
    color: var(--main-blue)!important;
    font-size: 14px;
    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;
}
.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;
}
input[name="myAccountInputDefCommCh"] + span.checkmark, input[name="myDocumentDocType"] + span.checkmark {
    background: var(--main-blue);
    border: 1px solid white;
}
input[name="myAccountInputDefCommCh"]:checked + span.checkmark, input[name="myDocumentDocType"]:checked + span.checkmark {
    background: white; border: 6px solid var(--main-blue);
}
input[name="myAccountInputDefCommCh"]:hover + span.checkmark, input[name="myDocumentDocType"]:hover + span.checkmark {
    background: white; border: 6px solid var(--main-blue);
}
.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;
}
@media (max-width: 991px){
    .control {
        background: var(--modal-bg);
        border-bottom-right-radius: 16px;
    }
    .closerD {
        display: none;
    }
    .only-m {
        display: block;
    }
    .only-d {
        display: none !important;
    }
    .only-m.logged-in {
        display: flex !important;
    }
    .control-menu {
        width: 100%;
    }
    .control-info {
        width: 100%;
        height: 100%;
        margin: 1rem 0;
    }
    .control-body {
        flex-direction: column;
    }
    .control-m-tab {
        display: flex;
    }
    #macloser {
        fill: var(--modal-bg);
    }
    .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;
    }
}
#userinfopromos {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
}
#userinfopromos>div {
    width: 46% !important;
    margin: 0 !important;
}
#playerCreditDm * {
    color: black!important;
}
select.uform option {
    color: black;
    background: #F1EDED;
}
.wsc ::selection, .wsc ::-webkit-selection, .wsc ::-moz-selection {
    color: white !important;
}
.logs-nav > .loglink {
    cursor: pointer;
}

/*///////////////////// NEW CSS /////////////////////*/

:root {
    --main-blue: #11167A;
    --main-yellow: #FFC808;
    --main-lighter: #F2F7FF;
    --main-light: #CEDDEF;
    --main-darker: #222831;
    --main-dark: #393E46;
    --modal-bg: #F1EDED;
    --ft-panel: #2b2b2b;
}
.main_header {
    position: sticky;
    top: 0;
    width: 100vw;
    background: linear-gradient(45deg, var(--main-blue) 40%, var(--main-yellow));
    display: flex;
    align-items: center;
    z-index: 10;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 50%);
}
a:hover {
    text-decoration: none !important;
}
.main_header_logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    cursor: pointer;
    margin-right: 4rem;
}
.main_header_img {
    margin: .5rem 1rem;
}
.main_header_txt {
    font-size: calc(1.6vw);
    color: var(--main-yellow);
}
.main_header_txt > span {
    color: white;
}
.main_header_menu {
    color: white;
    cursor: pointer;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 600;
}
.main_header_menu > span {
    color: white;
}
.main_header_menu:hover > * {
    fill: var(--main-yellow);
    color: var(--main-yellow);
}
.main_header_nav {
    position: absolute;
    right: 1rem;
    display: flex;
    gap: 1rem;
}
.main_header_tabs {
    display: flex;
}
.main_header_user_div {
    display: flex;
}
.main_header_lang {
    left: -6rem;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    cursor: pointer;
    
}
.main_header_lang_button {
    display: flex;
    align-items: center;
}
.main_hamburger {
    display: none;
}
.hbar {
    width: 1rem;
    border-top: 2px solid var(--main-blue);
}
.hbar-middle {
    width: 1.5rem;
    border-top: 2px solid var(--main-blue);
}
.footer_info > img {
    margin: 1rem 0 0 1.4rem;
}
.footer_txt {
    font-size: 1rem;
    color: white;
    padding: 1rem;
    max-width: 25%;
}
.footer_info {
    padding: 1rem;
}
.main_footer {
    width: 100vw;
    background: linear-gradient(var(--main-dark),var(--main-darker),var(--main-dark));
    display: flex;
    flex-direction: column;
    padding-bottom: 0 !important;
}
.footer_social {
    display: flex;
    padding: 1rem 0 0 1.4rem;
}
.social_links {
    padding-right: 1rem;
}
.footer_sec {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    margin-bottom: .5rem;
    color: white;
}
.footer_main{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}
.footer_menu{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    color: white;            
    justify-content: flex-start;
}
/*.footer_menu_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 220px;
}*/
.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;
    padding: 0;
}
.copyright {
    margin: 0;
    display: flex;
    align-items: center;
}
@media (max-width: 500px){
    .footer_sec {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}
@media (max-width: 600px){
    .main_header_menu {
        display: none;
    }
    .nav-bar-footer-panel {
        margin: 0 3.5rem;
    }
}
@media (max-width: 768px){
    .main_header_menu > svg {
        width: 28px !important;
        height: 28px !important;
    }
    #ribbon1, #ribbon2 {
        display: none;
    }
    .main_header_txt {
        display: none;
    }
    .footer_main {
        flex-wrap: wrap;
    }
    .footer_menu {
        width: 100%;
        padding: 0;
    }
    .footer_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        margin: 0 auto;
        order: 3;
    }
    .footer_txt {
        max-width: 100% !important;
    }
    .senator_group {
        align-items: center;
    }
    .senator_group > span {
        padding-left: 0;
    }
    .footer_social {
        padding: 1rem 0;
    }
    .footer_social {
        padding: 1rem 0;
    }
    .footer_info > img {
        margin: 0 !important;
    }
    .copyright {
        order: 2;
    }
    .senator_group > img {
        width: 100%;
    }
}
@media (max-width: 991px){
    .main_header_lang {
        display: none !important;
    }
    .main_header_menu > span {
        display: none;
    }
    .main_header_tabs {
        gap: 1rem;
    }
    .main_header_nav{
        right: 3.5rem;
    }
    .main_hamburger {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        height: 20px;
        cursor: pointer;
        padding-right: 1.3rem;
        position: absolute;
        right: 0;
    }
    .main_header_user_div > div {
        display: none !important;
    }
}
@media (max-width: 1240px){
    .main_header_menu {
        flex-direction: column;
        gap: 0;
    }
    .main_header_logo{
        margin-right: 2rem;
    }
}
.banner-section {
    background: var(--main-darker);
}
.sec_menu_tab_name {
    font-weight: 700;
    white-space: nowrap;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.sec_menu_container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(var(--main-dark),var(--main-darker));
    height: 60px;
    position: sticky;
    top: 63px;
    z-index: 9;
    box-shadow: 0px 3px 5px rgb(0 0 0 / 50%);
}
.sec_menu {
    color: var(--main-yellow);
    display: flex;
    align-items: center;
    font-size: .65rem;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sec_menu::-webkit-scrollbar {
    display: none;
}
.sec_menu_tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: .75rem;
    cursor: pointer;
    opacity: .85;
    width: 80px;
}
.sec_menu_tab:hover {
    transform: scale(1.035);
    opacity: 1;
    filter: drop-shadow( 0px 0px 5px rgba(255, 255, 255, .7));
}
.sec_menu_tab.active {
    opacity: 1;
    filter: drop-shadow( 0px 0px 5px rgba(255, 255, 255, .7));
}
.nav-bar-footer-tab.menuitem_wof {
    display: none;
}
.nav-bar-footer-tab.menuitem_wof.allowed {
    display: flex;
}
.nav-bar-footer-tab {
    color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.nav-bar-footer-tab.active {
    border-radius: 50%;
    outline: .5rem solid var(--main-dark);
    background: var(--main-dark);
}
.nav-bar-footer-tab:hover > * {
    fill: var(--main-yellow);
    color: var(--main-yellow);
}
.modalHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
    padding: 0 4rem;
    min-height: 3rem;
    color: var(--main-blue);
}
.modalHeader.user {
    display: flex;
    justify-content: space-between;
    align-items: unset;
    padding: 0;
    border-radius: 12px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    margin: 0;
    min-height: 6rem;
    max-height: 6rem;
    position: relative;
}
.modalCloser {
    position: absolute;
    right: 1rem;
    cursor: pointer;
}
.modalCloser.user {
    fill: var(--main-blue);
}
.modal-header button.close:hover{
    opacity: 1 !important;
}
.modal-content {
    padding: 0;
    margin: 0;
    background-color: var(--modal-bg);
    border-radius: 16px;
}
.modal-body {
    overflow-y: scroll;
    border-radius: 16px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-body::-webkit-scrollbar-thumb {
  background: var(--main-blue) !important;
}

.uep-tabs li{
    border: 2px solid var(--main-blue);
    border-radius: 10px 10px 0 0;
    width:50%;
    text-align: center;
    color: var(--main-blue)!important;
    min-height: 40px;
}
.uep-tabs li a{
    font-weight: normal;
    color: var(--main-blue)!important;
    border: 0 !important;
    padding: .5rem;
    height: 100%;
}
.uep-tabs li .active {
    background-color: var(--main-blue)!important;
    border-color: var(--main-blue)!important;
    color: white!important;
}
select {
    background-color: transparent;
    border: 1px solid var(--main-blue);
    width: 100%;
    padding: 8px;
    color: var(--main-blue);
    border-radius: 10px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    min-height: 40px;
    -webkit-appearance: initial;
}
select:active, select:focus {
    /*border: 2px solid var(--elem-color);*/
    border-radius: 10px;
    outline: 0;
    /*box-shadow: 0 0 0 3px #062b7c;*/
}
select option {
    background: var(--modal-bg);
    color: var(--main-blue);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
}
.input-group input {
    border: 1px solid var(--main-blue);
    min-height: 40px;
    border-radius: 10px !important;
    padding-left: 3rem !important;
    -webkit-appearance: initial;
}
.input-group input:active, .input-group input:focus, .input-group input:hover {
    border: 1px solid var(--main-blue)!important;
}
.terms > *, .terms, .terms li, .terms p, .terms span, .terms table tr td {
    color: var(--main-blue) !important;
}
.accHR {
    border-top: 2px solid var(--main-blue);
    opacity: .4;
    margin: .7rem 0;
}
#accModal {
    transition: .5s;
}
@media (max-width: 991px){
    #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;}
    .modalHeader.user {
        display: flex;
        justify-content: space-between;
        max-height: 5rem;
        background: var(--main-blue);
        border-radius: 12px;
        border-bottom-right-radius: 0;
        border-bottom-LEFT-radius: 0;
        border-top-right-radius: 0;
        margin: 0;
    }
    .modal-body {
        border-radius: 0;
    }
    .modalCloser.user {
        fill: white
    }
    .depo-backbtn {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .modal.fade .modal-dialog {
        transition: .5s;
    }
}
.sec_menu_tab.dropdown-toggle::after {
    display: none;
}
body.modal-open {
    overflow: hidden;
}
#accModal.show body {
    overflow-y: hidden;
}
.sidemenu-tab {
    position: absolute;
    left: 1rem;
    display: none;
    cursor: pointer;
}
.landing-banners {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
}
.lb-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 45%;
    overflow: hidden;
    border-radius: 12px;
    cursor: pointer;
    min-height: 100px;
    max-height: 200px;
    transition: .5s;
    position: relative;
    box-shadow: 3px 3px 3px rgb(0 0 0 / 50%);
    z-index: 1;
}
.lb-banner:hover {
    transform: scale(1.05);
}
.lb-banner.NotActive {
    filter: grayscale(.9);
}
.lb-banner-text {
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
}
.lb-banner-text .banner-title {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: bold;
    position: absolute;
    top: .5rem;
    left: .5rem;
    word-break: break-word;
    z-index: 1;
}
.lb-banner-text .banner-text {
    display: none;
    font-size: .7rem; 
}
.lb-banner img {
    width: 100%;
    height: 100%;
}
.lb-banner svg {
    display: block;
}
.lb-banner-img {
    display: flex;
    align-items: center;
    max-height: 200px;
}
.lb-link {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.lb-termlink {
    z-index: 2;
    opacity: .9;
    color: var(--main-yellow) !important;
    font-size: .7rem;
    width: fit-content;
    display: none;
    position: absolute;
    bottom: .5rem;
}
.lb-termlink:hover {
    opacity: 1;
}
@media (min-width: 500px){
    .lb-banner-text {
        align-items: flex-start;
    }
    .banner-title {
        font-size: 1.5rem;
    }
}
@media (min-width: 700px){
    .lb-banner-text .banner-text {
        display: block;
        padding: 1rem 0;
    }
    .lb-banner {
        flex-direction: row;
        padding: 0;
        padding-left: .5rem;
        max-height: unset;
    }
    .lb-banner svg {
        display: none;
    }
    .landing-banners {
        gap: 3rem;
    }
    .lb-banner-text {
        width: 100%;
        justify-content: flex-end;
        align-items: flex-start;
    }
    .lb-banner-img {
        all: unset;
    }
    .lb-termlink {
        display: block;
    }
}
@media (min-width: 884px){
    .lb-banner {
        width: 45vw;
    }
}
@media (min-width: 992px){
    .accdiv-modal {
        width: 100%;
    }
}
@media (min-width: 1200px){
    .lb-banner {
        width: 40vw;
    }
}
.groupNameText {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin: 0 1.5rem;
    text-transform: uppercase;
}
.groupNameText:before, .groupNameText:after, #gameSearchText:not(:empty):before, #gameSearchText:not(:empty):after{
    background-color: white;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.groupNameText:before,#gameSearchText:not(:empty):before {
    right: 0.5em;
    margin-left: -50%;
}
.groupNameText:after, #gameSearchText:not(:empty):after {
    left: 0.5em;
    margin-right: -50%;
}
.logmenu {
    display: none;
    transition: .5s;
}
.sidelang {
    display: none;
}
.logmenu.show {
    display: block;
}
.control-tab.only-m {
    text-transform: uppercase;
}
#playerCreditDm-side *{
    color: black!important;
}
#myAccTitle {
    display: block;
}
@media (min-width: 992px){
    .accHR.logged-in {
        display: none !important;
    }
    .accHR {
        display: none;
    }
    #playerCreditDm-side {
        display: none !important;
    }
    .usercredits {
        background: var(--main-blue);
        color: white;
        cursor: pointer;
        padding: 0.5rem;
        width: 35% !important;
        border-top-left-radius: 16px;
        margin-bottom: 0 !important;
    }
}
@media (min-width: 991px){
    #myAccTitle {
        display: none;
    }
    #slideMenu {
        height: 680px;
        overflow: hidden;
    }
}
.usercredits {
    background: var(--main-blue);
    color: white;
    cursor: pointer;
    padding: .5rem .5rem .5rem 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 75%;
}
#siteUsernameCreditsDm {
    font-weight: 700;
}
.favGameToggle {
    cursor: pointer;
    margin-left: 1rem;
}
#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;
}
#playerCreditDm.noshow {
    display: none !important;
}
.accordion > .card:first-of-type{
    border-radius: 12px !important;
}
.accordion > .card:not(:first-of-type):not(:last-of-type){
    border-radius: 12px !important;
}
.accordion > .card:last-of-type{
    border-radius: 12px !important;
}
.accordion > .card {
    background: transparent;
    border: 0 !important;
    box-shadow: none !important;
}
.accordion > .card .card-header {
    background: var(--main-blue);
    border-radius: 12px !important;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
}
.btn-link {
    color: var(--modal-bg) !important;
    text-decoration: none !important;
}
.genAmount {
    border: 1px solid var(--main-blue);
    padding: 0 .5rem !important;
    font-weight: bold;
    color: var(--main-blue) !important;
}
.form-group > .tertiary-btn {
    padding: 5px 15px;
}
#DepositGenAmount, #WithdrawGenAmount {
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: var(--modal-bg);
    padding: 0.5rem 0;
    box-shadow: 0 6px 6px -6px black;
}
@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;
}
#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;
}
#PSPsContainer .card {
    margin-bottom: .75rem;
}
#PSPsContainer .card .card-header {
    padding: 0.2rem 0.4rem;
}
#PSPsContainer .card .collapse .card-body {
    padding: 0 1.25rem;
}
#PSPsContainer .card .collapse .card-body .form-group {
    margin-bottom: 0.5rem;
}
#PSPsContainer .card .collapse .card-body .form-group .input-group {
    margin-bottom: 0 !important;
}
#DepositGenAmount .form-group , #WithdrawGenAmount .form-group {
    margin-bottom: .5rem;
}
.cashier {
    border: 1px solid var(--main-blue)!important;
    border-radius: 12px!important;
    box-shadow: none!important;
    opacity: 1;
}
.cashier:active, .cashier:focus {
    border: 1px solid var(--main-blue)!important;
    border-radius: 12px!important;
    box-shadow: none!important;
}
select.cashier {
    background: url(https://cdn-icons-png.flaticon.com/512/9053/9053032.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-size: 10px;
    background-position-x: 95%;
}
.depo-maingroups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.depo-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(to right, #111733, var(--main-blue), #111733);
    align-items: center;
    padding: 0.75rem;
    border-radius: 1rem;
    min-height: 80px;
    transition: .2s;
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
    color: white;
}
.depo-group-details {
    display: none;
}
.depo-group:hover {
    transform: scale(1.01);
    box-shadow: inset 0 1px 3px rgb(0 0 0 / 50%), 0 6px 6px -6px black;
    cursor: pointer;
}
.PayInOutTitle {
    display: flex;
    justify-content: center;
    position: relative;
    margin-bottom: 1rem;
}
.PayInOutTitle > svg {
    position: absolute;
    left: 0;
    display:none;
    cursor: pointer;
}
#myAccTitle {
    position: absolute; left: 50%;top: 50%;transform:translate(-50%,-50%);color: white;font-size: 1rem;font-weight: 300;
}
@media (max-width: 991px){
    .PayInOutTitle > svg, .PayInOutTitle {
        display:none !important;
    }
}
.langch.show {
    top: 115%;
}
.prevbtn {
    display: none;
    left: -2rem;
}
.backbtn {
    display: none;
    left: -1rem;
}

@media screen 
    and (min-width: 1240px) 
    and (max-width: 1300px){
        .backbtn, .prevbtn {
            display: block;
            position: absolute;
        }
        .backbtn button, .prevbtn button {
            display: grid;
            place-content: center;
        }
}
@media screen 
    and (min-width: 800px) 
    and (max-width: 1056px){
        .backbtn, .prevbtn {
            display: block;
            position: absolute;
        }
        .backbtn button, .prevbtn button {
            display: grid;
            place-content: center;
        }
}
@media screen 
    and (min-width: 1240px) 
    and (max-width: 1300px){
        .prevbtn {
            left: -1.8rem !important;
        }
        .backbtn {
            left: -.7rem;
        }
}
.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: 1.5rem;
    font-weight: bolder;
    font-style: italic;
    text-shadow: 1px 1px #fff;
}
.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: 1rem;
    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: 1rem;
    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: 1rem;
    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: 1rem;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
@-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;
}

#playercredits-tab p {
    font-size: 1.2rem;
    font-weight: bolder;
}

.input-group svg {
    z-index: 10;
}

.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;
}
.claim {
     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;
}
#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;
}
@media only screen and (max-width: 1240px){
    #promoCount {
        top: 40%;
        right: 15%; 
    }
    #wofspinCount {
        top: 40%;
        right: 30%; 
    }
}
@media only screen and (max-width: 991px){
    #promoCount, #wofspinCount {
        top: 65%;
        right: 0; 
        left: unset;
    }
}
#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 {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.wof-detail p {
    font-size: 1.1rem !important;
}
#wofCounter {
    color: white;
    font-weight: 700;
    width: 26px;
    height: 26px;
    background: red;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: -8px;
    display: 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: .6rem;
}
#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 spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.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); }

@media (min-width: 600px){
    .text.sec { padding-top: 35px; font-size: calc(6px + .5vw); }
    .text.thrd { padding-top: 55px; font-size: calc(4px + .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;
}
@media only screen and (max-width: 576px){
    .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);
    }
}
#winnerText {
    font-size: 20px;
    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;}
/* casino jp */
.jpgame {
    border-top-left-radius: calc(.8vw);
    position: absolute;
    top: 0; left: 0;
    font-size: calc(6px + .5vw);
    z-index: 1;
    opacity: .9;
    display: flex;
    align-items: flex-start;
}
.jpgame .jpot {
    background: orange; color: black;
    position: relative;
}
.jpgame .amount {
    background: black; color: white;
    position: relative;
}
.jpgame .amount::before {
    content: "";
    position: absolute;
    top: 0; left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 0px solid transparent;
    border-top: 20px solid #000;
    clear: both;
}
.jpgame .amount::after {
    content: "";
    position: absolute;
    top: 0; right: -5px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 5px solid transparent;
    border-top: 20px solid #000;
    clear: both;
}
.jptickers div {
    min-width: 200px;
    padding: 1rem;
    border-radius: .75rem;
    box-shadow: 0px 3px 30px rgba(0,0,0,.3);
    -webkit-box-shadow: 0px 3px 30px rgba(0,0,0,.3);
    cursor: pointer;
    transition: all .5s;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    font-size: calc(12px + .5vw);
    font-weight: 700;
    white-space: nowrap;
}
.jptickers div:nth-child(4n+1) {
    background: #231C11;
    color: rgb(255 203 119/1);
    border: 1px solid rgb(255 203 119/1);
}

.jptickers div:nth-child(4n+2) {
    background: #170809;
    color: rgb(254 71 96/1);
    border: 1px solid rgb(254 71 96/1);
}

.jptickers div:nth-child(4n+3) {
    background: #081717;
    color: rgb(55 255 221/1);
    border: 1px solid rgb(55 255 221/1);
}

.jptickers div:nth-child(4n+4) {
    background: #171123;
    color: rgb(126 67 234/1);
    border: 1px solid rgb(126 67 234/1);
}

.jptickers div:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}
#landingContent { 
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease; 
}
#landingContent.visible { 
    opacity: 1; 
    transform: translateY(0); 
}
.lc-container { 
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow: auto hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 1rem;
    scroll-behavior: smooth;
}
.lc-container::-webkit-scrollbar { 
    display: none; 
}
.lc-container .bonus-container {
    margin: 0;
    min-width: 260px;
}
.lp-game { 
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.3);
    min-width: 120px;
    width: calc(16vw + 5px);
    height: auto;
    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;
}
.lp-game:hover { 
    transform: scale(1.05);
}
section:has(.terms){
    background: var(--modal-bg) !important;
}