@property --rotate {
    syntax: "<angle>";
    initial-value: 132deg;
    inherits: false;
  }

  :root{
    font-size: 62.5%;
    --theme-clr-base: #262931;
    --theme-clr-black: linear-gradient(315deg, rgb(0, 0, 0) 0%, rgb(41, 88, 52) 50%, rgb(0, 0, 0)100%);
    --theme-clr-gold: #f5c53b;
    /*--theme-clr-form: #313644;*/
    /*--theme-clr-popup: #262931;*/
    --theme-clr-form: rgb(30, 30, 30);
    --theme-clr-popup: rgb(30, 30, 30);
    --theme-bg-topmenu: rgba(0,0,0,0.5);
    --theme-clr-event-main: #204729;
    --theme-clr-event-inactive: #bda000;
    --theme-clr-event-active: #f5c53b;
    --theme-grd-primary-active: linear-gradient(142deg, #9a6b29 0%, #ecbc4c 32%, #f2c85a 69%, #c28016 100%);
    --theme-grd-second-active: linear-gradient(142deg, rgba(20,50,34,1) 0%, rgba(34,100,49,1) 32%, rgba(20,50,34,1) 69%, rgba(55,55,55,1) 100%);
    --theme-clr-toggle-inactive: #2c303d;
    --theme-clr-toggle-active: #090a0d;
    --theme-clr-cus-gold: #773d10;
    --theme-clr-cus-secondary: #f6d681;
    --theme-clr-btn-disabled: #585858;
    --theme-clr-text-disabled: #cccccc;
    --theme-brd-btn-active: 2px solid #f5c53b;
    --theme-clr-mobile-bar: linear-gradient(315deg, rgb(0, 0, 0) 0%, rgb(41, 88, 52) 50%, rgb(0, 0, 0) 100%);
    --theme-grd-gold: linear-gradient(142deg, rgba(236,196,64,1) 0%, rgba(255,250,138,1) 32%, rgba(221,172,23,1) 69%, rgba(255,255,149,1) 100%);
    --theme-grd-black: linear-gradient(142deg, rgba(20,50,34,1) 0%, rgba(34,100,49,1) 32%, rgba(20,50,34,1) 69%, rgba(55,55,55,1) 100%);
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;
    --bs-soft: 0 5px 6px rgba(0,0,0,0.75);

    /* Card */
    --card-height: 65vh;
    --card-width: calc(var(--card-height) / 1.5);
  }

  body{
    padding:0;
    background: var(--theme-clr-event-main);
    background-image: url(../images/G7.png);
    background-size: 550px auto;
    background-repeat: repeat-y;
    background-position: top;
    position:relative;
    margin: auto;
    font-size:1.6rem;
    max-width:55rem;
  }

  html section{
    box-sizing:border-box;
  }

  h1, h2, h3, h4, h5, h6, p{
    padding:0;
    margin:0;
  }

  *{
    font-family:Montserrat;
    color:white;
  }

  option{
    color:black !important;
  }

  /* Images */
  img.full{
    width:100%;
    height:auto;
    display:block;
  }

  img{
    display:block;
  }

  .px-1{
    padding:1rem;
  }

  .px-10{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-15{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .px-20{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .px-25{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .px-30{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .py-10{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .py-15{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .py-20{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .mb-10{
    margin-bottom: 1rem;
  }

  .mb-15{
    margin-bottom: 1.5rem;
  }

  .mb-20{
    margin-bottom: 2.0rem;
  }

  .bg-form{
    background-color: var(--theme-clr-form);
    border: 1.5px solid #edbe4e;
    box-shadow: 0 5px 10px 3px black;
  }

  .bg-popup{
    background-color: var(--theme-clr-popup);
  }

  /* Font */
  .f-white{
    color:white;
  }

  .f-bold{
    font-weight:700;
  }

  .f-semibold{
    font-weight:600;
  }

  .f-medium{
    font-weight:500;
  }

  .f-regular{
    font-weight:400;
  }

  .f-extra{
    font-weight:800;
  }

  .f-black{
    font-weight:900;
  }

  .f-upper{
    text-transform:uppercase;
  }

  .cus-title{
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
  }

  .container-top{
    display: flex;
    justify-content: space-between;
  }

  .header{
    display: flex;
    gap: 1.5rem;
    width: 100%;
    position: relative;
    top: -2px;
    left: 0;
    padding: 0 1.5rem;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: var(--theme-clr-black);
    border-radius: 0 0 1.5rem 1.5rem;
    z-index: 9;
    box-shadow: 0px 3px 1rem rgb(0, 0, 0);
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    height: 60px;
  }

  .header .site-logo{
    width: auto;
    height: 6rem;
    display: flex;
    align-items: center;
  }

  .top-menu{
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    position: relative;
    z-index: 0;
    top: -1rem;
    padding: 2rem 1rem 1rem;
    margin-bottom: -1rem;
  }

  .top-menu .upper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .top-menu .wallet-amount{
    font-weight: 600;
    background: var(--theme-bg-topmenu);
    padding: 0.5rem 1rem;
    border-radius: 2.5rem;
  }

  .top-menu.default{
    background: #333333;
  }

  .top-menu.theme{
    background-image: url(../images/green_topbackground.png);
    background-size: cover;
    background-position: top center;
    box-shadow: 0 5px 15px #0000002b;
  }

  .top-menu .options-wrapper{
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.5rem;
  }

  .top-menu .options-wrapper{
    background: rgb(255 255 255 / 18%);
  }

  .top-menu .wallet{
    display: flex;
    gap: 0.5rem;
  }

  .top-menu .wallet-amount{
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }

  .top-menu .refresh-wrapper{
    display: flex;
    align-items: center
  }

  .top-menu .options{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .top-menu .option{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
    width: calc(25% - 0.5rem);
  }

  .top-menu .option img{
    max-width: 80%;
    width: 3.2rem;
  }

  .top-menu .option label{
    font-size: 1.1rem;
    color: white;
    font-weight: 500;
  }

  .header .site-logo img{
    height: 100%;
    max-height:4rem;
    width: auto;
    max-width:100%;
    margin:auto;
  }

  .notice-wrap{
    background: linear-gradient(50deg, #97732a 0%, #fbcb4f 49%, #a5701b 100%);
    position: relative;
    z-index: 1
  }

  .notice-line {
    width: 100%;
    overflow: hidden;
    padding: 0.1rem 0;
  }

  .notice-line p {
    white-space: nowrap;
    font-weight: var(--fw-medium);
    display: flex;
    /* animation properties */
    -moz-animation: notice 15s linear infinite;
    -webkit-animation: notice 15s linear infinite;
    animation: notice 15s linear infinite;
    font-size: 1.3rem;
    line-height: 1;
    padding: 3px;
    filter: drop-shadow(0 0 10px black);
  }

  /* for Firefox */
  @-moz-keyframes notice {
    from { -moz-transform: translateX(140%); }
    to { -moz-transform: translateX(-200%); }
  }

  /* for Chrome */
  @-webkit-keyframes notice {
    from { -webkit-transform: translateX(140%); }
    to { -webkit-transform: translateX(-200%); }
  }

  @keyframes notice {
    from {
      -moz-transform: translateX(140%);
      -webkit-transform: translateX(140%);
      transform: translateX(140%);
    }
    to {
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  .header-right-wrapper{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
  }

  .header-right-wrapper .profile-wrapper img{
    height: 2.4rem;
    width: auto;
  }

  .page-top-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .previous-link{
    position: absolute;
    left: 1rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
  }

  .sign-option{
    display:flex;
    flex-direction:row;
    align-items:center;
    background-color:#3B3B3B;
    padding-top: 62px;
    margin-top: -60px;
  }

  .sign-option .link-wrap{
    width:50%;
    color: black;
    background:var(--theme-grd-gold);
    height:3.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing: border-box;
    margin: 0.5rem;
    border-radius: 0.8rem;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    text-decoration: none;
  }

  .sign-option .link-wrap:after{
    content:'';
    position:absolute;
    height:10rem;
    width:3.2rem;
    transform: rotate(45deg);
    background:white;
    animation: slideAndRotate 2s infinite linear;
    opacity:0.3;
  }

  @keyframes slideAndRotate {
    0% {
      left: -100%;
    }
    100% {
      left: 200%;
    }
  }

  .sign-option .link-wrap:last-child{
    background: var(--theme-grd-black);
    color: (--theme-grd-gold);
  }

  .sign-option .link-wrap span{
    font-size: 1.6rem;
    text-transform: uppercase;
    text-align:center;
    font-weight: var(--fw-bold);
    background: var(--theme-grd-black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .sign-option .link-wrap:last-child span{
    background: var(--theme-grd-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  @keyframes shiningEffect {
    0% {
      background-position: top left;
    }
    100% {
      background-position: bottom right;
    }
  }

  .game-categories{
    width:auto;
    overflow-x: auto;
    overflow-y:hidden;
    white-space: nowrap;
    display: flex;
    align-items:center;
    position:relative;
    padding: 0.8rem;
    /*margin:0 1.5rem;*/
  }

  .games .categories-container{
    /* background:linear-gradient(180deg, #3b3b3b 0%, #141414 100%); */
    background: var(--theme-clr-event-main);
    position:relative;
    overflow:hidden;
    border-radius: 10rem;
    margin: 1rem;
  }

  /* width */
  .game-categories::-webkit-scrollbar {
    height:0;
  }

  .game-category{
    width: auto;
    display: flex;
    justify-content: center;
    align-items:center;
    font-size:1.2rem;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    z-index:3;
    box-sizing: border-box;
    opacity: 0.5;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
  }

  .game-category.selected{
    opacity: 1;
    background: var(--theme-grd-second-active);
    border-radius: 10rem;
    box-shadow: 0 0 6px 1px #ffa5009e;
  }

  .game-category img{
    width: 26px;
    height: 26px;
    margin:auto;
    filter: grayscale(1);
  }

  .game-category.selected img{
    filter: grayscale(0);
  }

  #selected-category{
    min-height:5rem;
    position:absolute;
    left:0;
    top:0;
    transition:0.5s;
  }

  #selected-category .box{
    background: var(--clr-bg-gold);
    height: 4rem;
    width: calc(100% - 0.5rem);
    border-radius: 0.8rem;
    margin: 0.5rem;
    position:relative;
  }

  #selected-category .box:after{
    content: '';
    background: var(--clr-bg-black);
    height: calc(4rem - 0.5rem);
    width: calc(100% - 0.5rem);
    top: 50%;
    left: 50% ;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 0.8rem;
  }

  #game-list{
    padding:1rem 1rem;
    width:auto;
    display: flex;
    flex-wrap: wrap;
    max-width:128rem;
    margin: auto;
  }

  .game{
    filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.5));
    flex: 0 0 calc(33.333% - 1rem);
    padding:0 0.5rem 1rem;
    cursor: pointer;
    border-radius: 0.8rem;
    position: relative;
  }

  #game-list .disabled-game{
    position: relative;
  }

  #game-list .disabled-game img{
    filter: brightness(0.5);
  }

  #game-list .disabled-game:after{
    content: '';
    position: absolute;
    height:24px;
    width: 24px;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
  }

  #game-list .excluded-by-bonus:after{
    background-image: url('../images/lock.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #game-list .under-maintenance:after{
    background-image: url('../images/under-maintenance.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .game .wrapper{
    position: relative;
  }

  .game .game-overlay{
    display:none;
  }

  .game img{
    width:100%;
    height:auto;
  }

  .game .game-name{
    width:100%;
    font-size: 1.6rem;
    font-weight: var(--fw-medium);
    text-align: center;
    margin-top: 0.5rem;
  }

  .scroll-toggle-wrapper{
    padding:0 5px;
    position:absolute;
    height:90px;width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-sizing:border-box;
  }

  /* Section */
  .vh-80{
    height:80vh;
    overflow:auto;
  }

  .mvh-80{
    height:auto;
    max-height:80vh;
    overflow:auto;
  }

  .m-maxwidth{
    max-width:550px;
  }

  .br-8{
    border-radius:8px;
  }

  .sh-dark{
    box-shadow: 0 0 15px 1px rgba(178, 82, 239, 0.4);
  }

  /* Contanier */
  .container.default{
    padding:3rem 1.5rem;
  }

  .container.full{
    padding:0;
  }

  .top-section{
    display: flex;
    gap: 1.5rem;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 1.5rem;
    justify-content: space-between;
    align-items: center;
    align-items: center;
    box-sizing: border-box;
    background: #0E0E0E;
  }

  .top-section div{
    margin:auto;
  }

  .top-section #prev-page{
    width:15%;
    display:grid;
  }

  .top-section #page-title{
    width:70%;
    text-align:center;
    font-size:20px;
  }

  .top-section .empty{
    width:15%;
  }

  .game-banner{
    width:100%;
    background-color:#2B2B2B;
  }

  .game-banner img{
    width:100%;
  }

  .radio-options{
    background-color:red;
    display:flex;
    gap:15px;
    align-items:center;
    padding: 0 30px;
    overflow:auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-top:50px;
  }

  .radio-options::-webkit-scrollbar {
    display: none;
  }

  .radio-options div{
    padding: 15px 25px;
    background-color:#3B3B3B;
    border-radius:100px;
    white-space: nowrap;
  }

  .game-providers{
    background: var(--clr-dark-bg);
  }

  .game-providers .wrapper{
    max-width: 128rem;
    margin: auto;
  }

  .game-providers span{
    font-size:1.6rem;
  }

  .game-providers .filter{
    padding: 15px 30px 18px 30px;
  }

  .game-providers .options{
    display: flex;
    gap: 25px;
    font-size:18px;
    position:relative;
    padding-bottom:3px;
  }

  .game-providers #underline{
    background-color:#BD77F8;
    height:2px;
    border-radius:100px;
    bottom:0;
    position:absolute;
    width:10px;
    transition:0.3s;
  }

  .game-providers .option.selected{
    color:#BD77F8;
  }

  .game-providers .provider-selection{
    padding: 30px 30px 15px 30px;
  }

  .provider-option{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:#2E2E2E;
    border-radius:100px;
    padding:10px 25px;
  }

  .provider-option div{
    display:flex;
    align-items:center;
  }

  .provider-option img{
    width:auto;
    height:42px;
    margin-right:15px;
  }

  /* BUTTON */
  .btn{
    border-radius: 0.8rem;
    /* background: var(--theme-grd-gold); */
    background: var(--theme-grd-primary-active);
    border: var(--theme-brd-btn-active);
    color:black;
    font-size: 1.6rem;
    padding:1.5rem;
    font-weight: var(--fw-semibold);
  }

  .btn-disabled{
    color: var(--theme-clr-text-disabled) !important;
    background: var(--theme-clr-btn-disabled) !important;
  }

  .btn-full{
    width: 100%;
  }

  .btn.default{
    width: 100%;
    padding: 1.5rem;
    margin: 1rem auto 3rem;
  }

  .btn-container{
    padding:20px 25px;
  }

  /* FORM / INPUT */
  .form{
    padding: 3rem 1.5rem;
  }

  .input-field .input-label{
    color: var(--clr-white);
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
    margin-bottom:0.5rem;

  }

  .input-field{
    display:grid;
  }

  input[type='text']:disabled{
    background-color:#E2E2E2;
  }

  input.default{
    border: none;
    border-radius: 0.8rem;
    padding: 1rem;
    color: black;
    font-size: 1.3rem;
    font-weight: var(--fw-medium);
  }

  input.default::placeholder{
    opacity:0.5;
    font-size:1.5rem;
    font-weight:var(--fw-regular);
    color:#000;
  }

  .input-field .error-message{
    display:none;
    font-size:1.2rem;
    color:#ff2c2c;
    margin-top:-0.5rem;
  }

  .copy .row .inp{
    width: 80%;
    box-sizing:border-box;
    overflow: hidden;
  }

  .copy .inp > div{
    overflow-x:scroll;
  }

  .copy .inp > div::-webkit-scrollbar{
    display:none;
  }

  .copy .row .value{
    color:black;
    white-space:nowrap;
  }

  .copy .btn-copy{
    width:20% !important;
    box-sizing:border-box;
  }

  .copy .inp::-webkit-scrollbar{
    display:none;
  }

  .input-field.error .error-message{
    display:block;
  }

  .input-field.error input{
    box-shadow: inset 0 0 0 1px #ff2c2c !important;
  }

  .input-field .verification{
    display:flex;
    gap:5px;
    justify-content:center;
    align-items:center;
  }

  .input-field .verification .verification-code{
    padding:7.5px 0;
    text-align:center;
    background-color:#6C09C1;
    border-radius:8px;
    font-size:20px;
    font-weight:600;
  }

  .input-field .verification input{
    width:70%
  }

  #login-form .form-checking{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #login-form .form-checking{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
  }

  #login-form input[type="checkbox"]{
    border:none;
    border-radius:8px;
  }

  form .extra-option{
    font-weight: var(--fw-regular);
    font-size:1.4rem;
    text-align:center;
  }

  form .extra-option span{
    font-weight: var(--fw-semibold);
  }

  #login-form .extra-option a{
    text-transform:uppercase;
  }

  .form-steps .step-obj{
    background-color:#3b3b3b;
    border-radius:100%;
    height:40px;
    width:40px;
    display:grid;
    position:relative;
  }

  .form-steps .step-number, .form-steps .step-success{
    display:grid;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
  }

  .form-steps .step-number{
    opacity:0.7;
    font-weight:700;
  }

  .step-line .line-active{
    transform:scaleX(0);
    transform-origin:left;
    animation: animate 0.3s linear forwards;
    background-color:white;
    display:none;
    border-radius:100px;
    background:#9D28FF;
  }

  .step-line{
    display:grid;
    width:25%;
    height:5px;
    background:#3B3B3B;
    margin:auto 10px;
    border-radius:100px;
  }

  @keyframes animate{
    100%{
      transform:scaleX(1);
    }
  }

  .form-steps .step-obj svg{
    margin:auto;
  }

  .form-steps{
    display:flex;
    justify-content:space-between;
    margin:3rem 5rem;
    position:relative;
  }

  .form-steps .step{
    position:relative;
  }

  .form-steps .step-label{
    position:absolute;
    top:50px;
    left:50%;
    transform:translateX(-50%);
    font-size:14px;
    font-weight:600;
    color:#676767;
  }

  .form-steps .step-success{
    display:none;
  }

  .form-steps .current .step-obj{
    box-shadow: inset 0 0 0 5px #9D28FF;
  }

  .form-steps .current .step-number, .form-steps .current .step-label, .form-steps .success .step-label{
    color:white;
    opacity:1;
  }

  .form-steps .success .step-obj{
    background:#9D28FF;
  }

  .form-steps .success .step-number{
    display:none;
  }

  .form-steps .success .step-success{
    display:grid;
  }

  .complete-register{
    background-color: #24e124;
    border-radius: 100%;
    width: 120px;
    height: 120px;
    margin:auto;
    display:grid;
  }

  .complete-register svg{
    margin:auto;
  }

  #completed-setup{
    display:flex;
    flex-direction:column;
  }

  #completed-setup span{
    text-align:center;
    font-size:20px;
    font-weight:600;
    margin:15px auto;
  }

  .step-group.hidden{
    display:none !important;
  }

  select {
    /* display: none;  */
    width:100%;
    border: none;
    border-radius: 0.8rem;
    padding: 1rem;
    color: black;
    font-size: 1.6rem;
    font-weight: var(--fw-medium);
  }

  .input-select{
    position:relative;
  }

  .input-field.error .select-selected{
    border: 1px solid #ff2c2c;
  }

  .input-field.error .error-message{
    display:block;
  }

  .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
    margin:5px;
  }

  .select-selected.select-arrow-active{
    border-radius:8px 8px 0 0;
  }

  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
    border-radius:8px 8px 0 0;
  }

  /* style the items (options), including the selected item: */
  .select-items div {
    background-color:#F4F4F4;
  }

  .select-items div:last-child {
    border-radius:0 0 8px 8px;

  }
  .select-selected {
    background-color:white;
    border-radius:8px;
  }

  .select-items div,.select-selected {
    color: black;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
  }

  /* Style items (options): */
  .select-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-radius: 0 0 0.8rem 0.8rem;
  }

  .select-items:hover {
    background:#FAFAFA;
  }

  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }

  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }

  .multi-date{
    display:flex;
    box-sizing:border-box;
    justify-content:center;
    align-items:center;
    gap:15px;
  }

  input[type='date']{
    -webkit-appearance: none;
    width: 100%;
    box-sizing: border-box;
  }

  input[type='date']::-webkit-inner-spin-button,
  input[type='date']::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }

  .multi-date div{
    width:50%;
    box-sizing:border-box;
  }

  .multi-date input{
    box-sizing:border-box;
    width:100%;
  }

  /* MOBILE NAVIGATION */
  .mobile-navigation{
    background: var(--theme-clr-mobile-bar);
    height: 6.4rem;
    width:100%;
    position:fixed;
    box-shadow: 0px -0.5rem 1rem rgba(0,0,0,1);
    bottom: -1px;
    left:50%;
    transform:translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index:95;
    max-width:55rem;
  }

  .mobile-navigation .navigation-item{
    width: 20%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    height:100%;
  }

  .navigation-item .n-item{
    height: 2.8rem;
    animation: animatedShadow 3s infinite;
  }

  .navigation-item label{
    font-size:1.2rem;
    font-weight:500;
  }

  @keyframes animatedShadow {
    0% {
     filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));
   }
   50% {
     filter: drop-shadow(0 0 0.8rem rgba(255, 255, 0, 0.7));
   }
   100% {
     filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));
   }
  }

  @keyframes csyShadow {
    0% {
      filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));
    }
    50% {
      filter: drop-shadow(0 0 1.5rem rgba(255, 255, 0, 0.7));
    }
    100% {
      filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));
    }
  }

  .navigation-item .s-item{
    position: absolute;
    height: 100%;
    top: -45%;
    filter: drop-shadow(0 0 5px rgba(246, 214, 129, 0.7));
    animation: menu-icon-glow 1.24s infinite;
  }

  .mobile-navigation span{
    font-size: 1.2rem;
    font-weight: var(--fw-medium);
    text-transform: capitalize;
  }

  .mobile-navigation .mid span{
    margin-top: 3rem;
    color: white;
    font-weight: 600;
  }

  /* Pop up */
  #lottery-platforms button{
    border:none;
    border-radius: 10rem;
    background-color:#6C09C1;
    font-weight: var(--fw-bold);
    font-size: 2rem;
    text-transform:uppercase;
    width:100%;
    padding: 1.5rem;
  }

  #lottery-platforms button:disabled{
    background-color:#5C5C5C;
  }

  .sticky-element{
    position: fixed;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 97;
    width: 7.2rem;
    height: auto;
    border-radius: 100%;

    /*background: var(--clr-bg-gold);*/
    animation: moveVertical 75s infinite;
  }

  .sticky-element img{
    width:100%;
    animation: csyShadow 3s infinite, shake 3s  infinite;
  }

  .sticky-wrap .text{
    text-align: center;
    background: var(--theme-grd-gold);
    box-sizing: border-box;
    padding: 0.3rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: black;
    animation: csyScale 1s infinite;
  }

  @keyframes shake {
    0% { transform: rotate(0deg) scale(0.9); }
    40% { transform: rotate(0deg) scale(0.9); }
    45% { transform: rotate(-8deg) scale(1);}
    50% { transform: rotate(8deg) scale(1); }
    55% { transform: rotate(-8deg) scale(1); }
    60% { transform: rotate(0deg) scale(0.9); }
    100% { transform: rotate(0deg) scale(0.9); }
  }

  @keyframes csyScale {
      0%{
        transform: scale(0.9);
      }
      50%{
        transform: scale(1);
      }
      100%{
        transform: scale(0.9);
      }
  }

  .sticky-wrap{
    position: relative;
  }

  .close-sticky{
    position: absolute;
    right: -0.5rem;
    top: -2rem;
    background: var(--clr-black);
    border-radius: 0.8rem;
    display: flex;
  }

  .close-sticky svg > *{
    color: white;
  }

  @keyframes moveVertical {
    0% {
      top:75%;
    }
    50% {
      top:25%;
    }
    100% {
      top:75%;
    }
  }

  @media only screen and (min-width:551px){
    .sticky-element{
      left: calc(1rem + ((100% - 49rem) / 2));
      transform: translate(-50%,-50%);
    }
  }

  #contact-wrapper{
    padding:3rem 1.5rem;
  }

  @media only screen and (min-width: 500px) and (max-width: 768px) {
    #sport-swiper .swiper-button-next,
    #sport-swiper .swiper-button-prev {
      display: none;
    }
  }

  /*** TABLE ***/
  .show-table{
    border-radius: 0.8rem;
    overflow: auto;
  }

  .table-info{
    width:100%;
    display:table;
    overflow-x:auto;
    border-spacing:0;
    white-space:nowrap;
    border-radius:8px;
    position:relative;
    z-index:2;
  }

  .table-info th{
    background-color:#1A1A1A;
    font-weight: var(--fw-medium);
  }

  .table-info th, .table-info td{
    padding:1rem;
    text-align:left;
    font-size: 1.3rem;
  }

  .table-info td{
    font-weight: var(--fw-regular);
  }

  .table-info tr:nth-child(even){
    background-color:#2E2E2E;
  }

  .table-info tr:nth-child(odd){
    background-color:#363636;
  }

  .show-table::-webkit-scrollbar {
    height:0.5rem;
  }

  table.border{
    border-collapse: collapse;
  }

  table.border, table.border th, table.border td, table.border tr{
    border:1px solid white;
    padding:5px;
  }

  table.promo{
    font-size:14px;
  }

  /* Track */
  .show-table::-webkit-scrollbar-track {
    border-radius: 0 0 1rem  1rem;
    background-color:#1A1A1A;
  }

  /* Handle */
  .show-table::-webkit-scrollbar-thumb {
    background: rgb(90 90 90);
    border-radius: 1rem   ;
  }

  .table-scroll-space{
   width:100%;
   height:2.5rem;
   margin-top:-1rem;
   border-radius: 0 0 0.8rem 0.8rem;
   display:none;
   position: relative;
   z-index: -1;
  }

  /* TOGGLE */
  .toggle-content{
    display:none;
  }

  .toggle-content.selected{
    display:block;
  }

  .cus .toggle-options{
    display:flex;
    flex-direction:row;
    gap:15px;
    padding:15px;
  }

  .cus .toggle-options .btn-toggle{
    width:50%;
    font-weight:600;
  }

  /* UPLOAD FILE (INPUT) */
  input[type=file]::-webkit-file-upload-button {
    display:none;
  }

  input[type=file]{
    box-sizing:border-box;
    background-color:white;
    position:relative;
    min-height:42px;
  }

  .upload-label{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translatey(-50%);
    padding: 0 1rem;
    background: var(--theme-clr-event-active);
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0 0.8rem 0.8rem 0;
    font-size:1.4rem;
    color:black;
    font-weight: var(--fw-semibold);
  }

  .input-file{
    position:relative;
  }

  .input-file input{
    border: none;
    border-radius: 8px;
    font-size: 16px;
    padding: 10px;
    color: black;
    font-size: 16px;
    font-weight: 400;
    width:100%;
    margin-right:15px;
  }

  /* BONUS PAGE */
  .bonus .toggle-options{
    display:flex;
    flex-direction:row;
    gap:15px;
    padding:15px;
    overflow:auto;
    white-space:nowrap;
  }

  .bonus .toggle-options::-webkit-scrollbar {
    display:none;
  }

  .notification{
    padding:1.5rem;
    border-radius:0.8rem;
    background: var(--bg-white-transparent);
    margin-bottom:1.5rem;
  }

  .notification .title{
    font-size:16px;
    font-weight:400;
    margin-bottom:5px;
  }

  .notification .text{
    font-size:16px;
    font-weight:300;
  }

  .notification .list-item{
    margin-bottom:5px;
    display:flex;
    flex-direction:row;
    gap:3px;
  }

  .notification .row{
    display:flex;
    flex-direction:row;
    padding-bottom:15px;
  }

  .notification .row:last-child{
    padding-bottom:0;
  }

  #content-turnover .filter-options{
    background: var(--bg-white-transparent);
    padding: 15px;
    margin-bottom:15px;
    border-radius: 8px;
    display:none;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 15px;
  }

  #content-turnover .option{
    width:auto;
    font-size:14px;
    text-align:center;
    padding:8px 15px;
    background: none;
    border-radius:5px;
    border:none;
    color:#c9c9c9;
  }

  #content-turnover .option.selected{
    background:#6C09C1;
    color:#ffffff;
  }

  #content-turnover .filter-options input{
    display:none;
  }

  #content-referral .referral-box{
    padding: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border:1.5px solid #6C09C1;
    margin:25px auto;
  }

  #content-referral .referral-box .col{
    width:50%;
    text-align:center;
  }

  #content-referral .col .title{
    font-size:14px;
    font-weight:400;
    margin-bottom:10px;
  }

  #content-referral .col .value{
    font-size:20px;
    font-weight:600;
    color:white;
  }

  #content-referral .btn-copy{
    padding: 5px;
    box-sizing: border-box;
    background: #6C09C1;
    border-radius: 0 5px 5px 0;
    font-weight: 400;
    width:30%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:16px;
  }

  #content-referral .row{
    padding-top:5px;
    display: flex;
    box-sizing: content-box;
    flex-direction: row;
    justify-content:space-between;
  }

  #content-referral .inp{
    border-radius:5px 0 0 5px;
    font-size:16px;
    font-weight:400;
    padding:10px;
    background:white;
  }

  .overlay{
    z-index:98;
    opacity:0.75;
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100%;
    margin:auto;
    display:none;
    transition:0.1s;
    background: #000;
  }

  .promo-header img{
    width:100%;
    height:auto;
    border-radius:8px 8px 0 0;
  }

  .promo-content{
    padding: 0 25px;
  }

  .promo-content .group, .promo-content .promo-title{
    padding:10px 0;
  }

  .promo-content .text-group{
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .promo-content .text-group .text{
    font-size:14px;
    font-weight:400;
  }

  .promo-content .text-group .group-title{
    font-size:14px;
    font-weight:600;
  }

  .promo-content ul{
    padding:0 18px;
    margin:0;
  }

  .promo-content li{
    margin-bottom:5px;
    font-weight:400;
    font-size:14px;
  }

  .deposit .toggle-options{
    display:flex;
    flex-direction:row;
    gap:15px;
    padding:15px;
  }

  .deposit .toggle-options .btn-toggle{
    width:50%;
    font-weight:600;
  }

  .deposit-account, .withdraw-account{
    padding:0 1.5rem;
    border-radius: 0.8rem;
    background-color: rgba(0,0,0,0.25);
  }

  .deposit-account .row, .withdraw-account .row{
    display:flex;
    flex-direction:row;
    padding:1rem 0;
    position:relative;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.15);
  }

  .deposit-account .row .data{
    width:80%;
  }

  .withdraw-account .row .data{
    width:100%;
  }

  .deposit-account .row:last-of-type, .withdraw-account .row:last-of-type{
    border-bottom:none;
  }

  .deposit-account .label, .withdraw-account .label{
    font-size:1.2rem;
    text-transform:capitalize;
    font-weight: var(--fw-regular);
    margin-bottom:0.5rem;
    color:#D1D1D1;
  }

  .deposit-account .value, .withdraw-account .value{
    font-weight: var(--fw-medium);
    font-size: 1.4rem;
    width: 100%;
  }

  .deposit-account .btn-copy{
    padding: 0.5rem;
    box-sizing:border-box;
    background: var(--clr-btn-secondary);
    border-radius: 0.5rem;
    font-size: 1.2rem;
    width:20%;
    text-align:center;
    color: var(--theme-clr-gold);
    font-weight: var(--fw-semibold);
  }

  .deposit-account .note{
    font-size: 1.1rem;
    padding-bottom: 1rem;
    font-style: italic;
  }

  .transaction .pre-amount{
    display: flex;
    align-items: center;
  }

  .transaction .pre-amount > img{
    width: 20%;
    flex: 0 0 20%;
  }

  .show-bonus{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap:15px;
    margin:15px auto;
  }

  .show-bonus .bonus-card{
    width:calc( 50% - 7.5px);
  }

  .show-bonus .bonus-box{
    background-color:#2E2E2E;
    border-radius:8px;
    padding:10px;
    width:100%;
    box-sizing:border-box;
  }

  .show-bonus .bonus-box .label{
    font-size:12px;
    font-weight:300;
    margin-bottom:5px;
  }

  .bonus-box.disabled{
    opacity:0.6;
  }

  .bonus-box.selected{
    background:#6c09c1;
  }

  .show-bonus .bonus-box .value{
    font-size:20px;
    font-weight:400;
  }

  .updatebonus-options{
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
  }

  .btn-allupdatebonus{
    display: flex;
    justify-items: center;
    align-items: center;
    gap: 5px;
    border-radius: 100px;
    opacity:0.6;
  }

  .btn-allupdatebonus .check{
    height:10px;
    width:10px;
    border:2px solid white;
    border-radius:3px;
    position:relative;
  }

  .btn-allupdatebonus svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:none;
  }

  .btn-allupdatebonus.active{
    opacity:1;
  }

  .btn-allupdatebonus.active .check{
    background:#6C09C1;
    border-color:#6C09C1;
  }

  .btn-allupdatebonus.active svg{
    display:block;
  }

  .total-updatebonus{
    width:100%;
    padding:15px 5px;
    box-sizing:border-box;
    border-radius:5px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }


  .fund-options{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    width: 55%;
    gap: 1rem;
  }

  .fund-options .option{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.4rem;
    height: 8rem;
    flex-direction: column;
    position: relative;
  }

  .fund-options .option > div{
    margin-top:0.3rem;
  }


  .fund-options .option > img{
    height:4rem;
  }

  .fund-options .option:last-child::after{
    display:none;
  }

  .fund-options span{
    font-size: 1.2rem;
  }

  #lbl-username{
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
  }



  #balance{
    font-weight: var(--fw-semibold);
  }

  #side-navi .menu-profile, .container.avatar{
    background-image: url(../images/green_background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }


  .game-card {
    display:flex;
    flex: 0 0 calc(33.333% - 1rem);
    padding:0 0.5rem 1rem;
    cursor: pointer;
    width:100%;
  }

  .game-card.active{
    filter: drop-shadow(0 0 2px rgba(255, 236, 96, 0.35));
  }

  .game-card img{
    width:100%;
  }

  .game-card .frame{
    background: #191c29;
    width: 100%;
    margin: 0.3rem;
    position: relative;
    border-radius: 0.8rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: 1.5em;
    color: rgb(88 199 250 / 0%);
    cursor: pointer;
    font-family: cursive;
  }

  .game-card .background{
    width: 100%;
    margin: 0.3rem;
    position:absolute;
    height: calc(100% - 1.6rem);
    width: calc(100% - 1.6rem);
    z-index: 3;
    overflow: hidden;
    border-radius: 0.8rem;
  }

  .game-card .background img{
    height: 100%;
    object-fit: contain;
    filter: blur(1px);
  }

  .game-card .character {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    height: auto;
    height: calc(100% - 0.3rem);
    width: auto;
    max-width: calc(100% + 1rem);
  }

  .game-card .label-wrap{
    position: absolute;
    z-index: 5;
    transform: translateX(-50%);
    left: 50%;
    width: 80%;
    bottom: 10%;
  }

  .game-card .label-wrap .label{
    width:100%;
    height:auto;
  }

  .game-card .label-wrap .label{
    width:100%;
    height:auto;
  }

  .game-card .frame::before {
    content: "";
    width: calc(100% + 0.6rem);
    height: calc(100% + 0.6rem);
    border-radius: 0.8rem;
    background-image: linear-gradient(var(--rotate), rgba(236,196,64,1) 0%, rgba(255,250,138,1) 32%, rgba(221,172,23,1) 69%, rgba(255,255,149,1) 100%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 2.5s linear infinite;
    z-index:2;
  }

  .game-card .frame::after {
    position: absolute;
    content: "";
    top: 5%;
    left: 5%;
    z-index: 1;
    height: 90%;
    width: 90%;
    margin: 0 auto;
    filter: blur(1.5rem);
    background-image: linear-gradient(var(--rotate), rgba(236,196,64,1) 0%, rgba(255,250,138,1) 32%, rgba(221,172,23,1) 69%, rgba(255,255,149,1) 100%);
    opacity: 1;
    transition: opacity .5s;
    animation: spin 2.5s linear infinite;
  }

  @keyframes spin {
    0% {
      --rotate: 0deg;
    }
    100% {
      --rotate: 360deg;
    }
  }



  /* Footer */
  footer{
    background: #000;
    padding-top:1.5rem;
    position: relative;
  }

  footer:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    width:100%;
    background-color: #000;
    height:10rem;
  }

  .btn-contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: #2E2E2E;
    margin-bottom: 1.5rem;
    border-radius: 0.8rem;
  }

  .contact-box .value{
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
  }

  .contact-box .method{
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
  }

  .contact-box{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-direction: row;
  }

  .btn-contact svg{
    display:grid;
  }

  .language-options .option{
    display: flex;
    border-bottom:1px solid rgba(255,255,255,0.4);
    justify-content: space-between;
    flex-direction: row;
    padding: 1.5rem 0;
    align-items:center;
  }

  .language-options .option:last-of-type{
    border-bottom:none;
  }

  .language-options svg{
    display:grid;
  }

  .language-options .box{
    display:flex;
    flex-direction:row;
    gap:15px;
    justify-content:flex-start;
    align-items:center;
  }

  .language-options img{
    height:2rem;
    width:2rem;
  }

  .language-options svg{
    display:none;
  }

  .language-options .selected svg{
    display:grid;
  }

  .language-title{
    font-weight:500;
    font-size:14px;
    margin-bottom:15px;
  }

  .hide{
    display:none !important;
  }

  #provider-option-list{
    display:flex;
    flex-wrap:wrap;
  }

  #provider-option-list .option{
    padding: 0.5rem 1.5rem;
    box-sizing: border-box;
    margin: 0 0.5rem 1rem;
    flex: 0 1 calc(20% - 1rem);
    background:var(--clr-grey);
    border-radius: 25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #provider-option-list .option img{
    filter: grayscale(100%);
  }

  #provider-option-list .option.selected img, #provider-option-list .option:hover img{
    filter: grayscale(0);
  }

  #provider-option-list .option span{
    color: rgba(255, 255, 255, 0.75);
  }

  #provider-option-list .option.selected{
    background:var(--clr-gradient-mid);
  }

  #provider-option-list .option.selected span, #provider-option-list .option:hover span{
    color: var(--clr-white);
  }

  #provider-option-list .option img{
    height:100%;
    max-height:3.2rem;
    width:auto;
  }

  .bonus-banner{
    padding-top:0 !important;

  }

  .bonus-banner img{
    width:100%;
    -webkit-filter: drop-shadow(0 0 5px rgba(252, 237, 144, 0.2));
    filter: drop-shadow(0 0 5px rgba(252, 237, 144, 0.2));
  }

  .banners{
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .banners img{
    width:100%;
    border-radius:0.8rem;
    animation-name: div-scale;
    animation-duration: 1.8s; /* Adjust the duration as needed */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }



  @keyframes div-scale {
    0% {
      transform: scale(1);
      filter: drop-shadow(2px 4px 6px var(--theme-clr-gold));
    }
    50% {
      transform: scale(0.98);
      filter: drop-shadow(2px 4px 2px var(--theme-clr-gold));
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(2px 4px 6px var(--theme-clr-gold));
    }
  }

  #selected-game .popup-content{
    height:auto;
    border-radius:8px;
    width:auto;
    padding:25px;
    background-color:#3B3B3B;
  }

  #selected-game img{
    width:75%;
    height:auto;
    margin:auto;
  }

  #selected-game .game-name{
    margin:1.5rem auto;
    font-size:2rem;
    font-weight: var(--fw-semibold);
  }

  #selected-game button{
    padding:1.5rem 0;
    background: var(--clr-gradient-mid);
    border-radius:10rem;
    width:30rem;
    max-width:80%;
    border:none;
  }

  #selected-game .game-action{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    align-items: center;
  }

  #selected-game .game-info{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
  }

  #provider-selector .popup-content{
    height:60vh;
    border-radius:8px;
    width:auto;
    padding:25px;
    background-color:#3B3B3B;
  }


  #profile-wrapper{
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: white;
  }

  #profile-wrapper img{
    height: 2rem;
  }

  .top-header .amount{
    display: flex;
    align-items: center;
    margin-right: 1.5rem;
    padding: 0.5rem 1.5rem;
    font-weight: var(--fw-semibold);
    border-right: 0.1rem solid var(--clr-white);
  }

  .top-header .profile-info{
    display: flex;
    align-items: center;
    gap:1.5rem;
  }

  .top-header .profile-info img{
    aspect-ratio: 1;
    height:3.2rem;
  }

  .top-header .icon{
    display: grid;
    align-items: center;
    gap:1.5rem;
  }

  #nav-options-box{
    position: absolute;
    right:3rem;
    top:100%;
    background: var(--clr-grey-dark);
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 0 0 0.8rem 0.8rem;
    box-shadow: var(--bs-soft);
  }

  #nav-options-box a{
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--clr-white);
    font-weight: var(--fw-medium);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  #nav-options-box a:hover svg > *, #nav-options-box a:hover span{
    color: var(--clr-active);
  }



  #login-form .content > div, #register-form .content > div{
    height:auto;
  }

  #login-form img{
    margin:1.5rem auto;
    width:40%;
    height:auto;
    max-width:15rem;
  }

  #login-form form, #register-form form{
    padding: 0 3rem;
  }

  #login-form .content-body, #register-form .content-body{
    margin:1.5rem;
  }

  #register-form form{
    padding-top:1.5rem;
  }

  .das-wrapper{
    padding:0;
    display:block;
  }

  #content-transfer .transfer-overview .txt-label{
    width:35%;
  }

  #content-transfer .transfer-overview .txt-divider{
    width:5%;
  }

  #content-transfer .transfer-overview .txt-value{
    width:60%;
  }

  #content-transfer .transfer-overview{
    box-sizing: border-box;
  }

  .multi-field{
    display:flex;
    flex-wrap: wrap;
  }

  .multi-field > .input-field{
    flex:0 0 100%;
  }


  .section-title{
    font-size:2rem;
    font-weight: var(--fw-medium);
    color: var(--clr-white);
    margin: 0 1.5rem 0.5rem 1.5rem;
    position: relative;
    box-sizing: border-box;
  }

  .section-title:after{
    content: '';
    height:0.3rem;
    width:100%;
    background:var(--clr-white);
    position: absolute;
    bottom:-0.5rem;
    left:0;
  }

  .side-navi .side-group{
    display:flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom:1rem;
  }

  .side-navi .title{
    color: var(--clr-white);
    font-size:1.4rem;
    font-weight: var(--fw-bold);
  }

  .side-navi svg > *{
    color: var(--clr-active);
  }

  .side-navi a{
    text-decoration: none;
    padding: 0.5rem;
    display:flex;
    gap:0.5rem;
    align-items: center;
  }

  .side-navi a span{
    font-size: 1.6rem;
    font-weight: var(--fw-regular);
    color: var(--clr-inactive);
  }

  .side-navi a:hover span, .side-navi .selected span, .side-navi .selected svg > *{
    color: var(--clr-white);
  }

  .side-navi .selected{
    background: var(--clr-gradient-mid);
    border-radius: 0.8rem;
  }

  .promotion-section{
    padding: 3rem;
  }

  .lbl-name{
    display:none;
    font-size:1.4rem;
    text-transform: uppercase;
    text-align: center;
    margin-top:0.5rem;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-page-games .game, #games-wrapper .game{
    overflow:hidden;
  }

  #hot-games{
    padding: 3rem 1.5rem;
  }

  #upcoming-match{
    padding: 3rem 0;
  }

  #upcoming-match .title, #hot-games .title{
    font-size: 1.8rem;
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  #upcoming-match .title{
    padding: 0 1.5rem;
  }

  #hot-games{
    margin:auto;
    max-width:128rem;
  }

  #hot-games .wrapper{
    display:flex;
  }

  #hot-games .wrapper .col-1{
    display:none;
  }

  #hot-games .wrapper .col-2{
    flex:1 0 70%;
    overflow: hidden;
  }

  #hot-games .wrapper .col-2 .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }

  #hot-games .toggle-group{
    display:flex;
    gap:1rem;
  }

  #hot-games .toggle-group > div{
    color: var(--clr-white);
    padding:0.8rem 1.5rem;
    font-size:1.6rem;
    font-weight: var(--fw-medium);
    border-radius: 0.8rem;
    position:relative;
    box-shadow: 0 0 0.1rem 0.1rem #fff inset;
    box-sizing: border-box;
  }

  #hot-games .toggle-group .selected{
    background:var(--clr-gradient-mid);
    box-shadow:none;
  }

  #hot-list, #recommend-list {
    display: flex;
    overflow: scroll;
  }

  #hot-list .game, #recommend-list .game {
    flex: 0 0 40%;
  }

  #recommend-wrapper{
    background:var(--bg-white-transparent);
  }

  #recommend-wrapper , #upcoming-wrapper{
    padding: 2.5rem 0;
  }

  @media only screen and (max-width:480px){
    .game .game-name{
      font-size: 1.4rem;
    }
  }

  #available-days{
    text-align:center;
    width:100%;
    display: table;
    border-spacing: 0;
  }

  #available-days td, #available-days th{
    border-collapse: collapse;
    border: 1px solid white;
    padding:0.5rem;
    width:14.28%;
  }

  #available-days th{
   font-size:1.2rem;
   font-weight: var(--fw-semibold);
  }

  #available-days td{
   font-size:1.2rem;
   font-weight: var(--fw-medium);
  }

  .event-conditions .condition{
    font-size: 1.2rem;
    flex-direction: column;
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    font-weight: var(--fw-regular);
    border-radius: 0.8rem;
  }

  .event-conditions .condition span{
    font-size: 1.4rem;
    font-weight: var(--fw-medium);
  }

  #first-come{
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  #first-come::-webkit-scrollbar {
    width: 0;
    background-color: transparent;
  }
  #first-come::-webkit-scrollbar-thumb {
    background-color: transparent;
  }


  #bonus-wrapper{
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: top center;
    padding-bottom:3rem;
  }

  #bonus-wrapper .swiper-slide img{
    border-radius: 0.8rem;
    filter: drop-shadow(0px 5px 8px rgba(0,0,0,0.5));
  }

  #bonus-wrapper .swiper-button-prev #bonus-wrapper .swiper-button-next{
    display:none;
  }



  @keyframes blink{
    0%{
      opacity: 0;
    }

    50%{
      opacity: 1;
    }

    100%{
      opacity: 0;
    }
  }

  /* Transaction form */
  .transaction, .sign{
    padding:1rem;
  }

  .form-wrapper{
    border-radius: 0.8rem;
  }

  .form-title{
    font-size:  1.8rem;
    color: white;
    font-weight: var(--fw-semibold);
    text-align: center;
  }

  .deposit-methods{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .deposit-methods .method{
    padding: 1rem 0.5rem;
    box-sizing: border-box;
    flex: 0 0 calc(33.333% - 0.5rem);
    background: #2c2c2c;
    border: none;
    border-radius: 0.8rem;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight:var(--fw-medium);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    color: var(--clr-inactive);
  }

  .deposit-methods svg > *{
    color: var(--clr-inactive);
  }


  .deposit-methods .selected{
    box-shadow: inset 0 0 0 1.5px var(--theme-clr-gold) !important;
    background: black;
    color: var(--theme-clr-gold);
  }

  .deposit-methods .selected svg > *{
    color: var(--theme-clr-gold);
  }

  .deposit-bank{
    height:200px;
    width:100%;
    background:#2c2c2c
  }

  .deposit-bank input[type="radio"]{
    display: none;
  }

  .deposit-bank input[type="radio"]{
    display: none;
  }

  form .back-link{
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
  }

  form .back-link a{
    font-weight: var(--fw-medium);
  }

  .unavailable-box{
    background: var(--clr-grey-dark);
    border-radius: 0.8rem;
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 1.5rem;
    box-sizing: border-box;
    font-size:1.2rem;
    text-align: center;
  }

  .unavailable-box svg > *{
    color:var(--clr-inactive);
  }

  .ifb-wrapper{
    height: 12rem;
    width:100%;
    filter: drop-shadow(0 0.5rem 0.8rem rgba(0,0,0,0.5));
    position: relative;
    margin:1.5rem 0 2.5rem;
    background-image:url('../img/ifb/background.html');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.8rem;

  }

  .ifb-img{
    height: 14rem;
    width: auto;
    position: absolute;
    right:2.5rem;
    top: 50%;
    transform: translateY(-50%);
  }

  .ifb-img img{
    height:100%;
  }

  .ifb-wrapper .title{
    font-size:1.8rem;
    color: white;
    position: absolute;
    left:2.5rem;
    top:50%;
    font-weight: var(--fw-semibold);
    transform: translateY(-50%);
    z-index: 2;
  }

  .notice-box{
    padding:1rem;
    background:rgba(253,232,161,0.15);
    border-radius: 0.8rem;
    transition: 0.3s;
  }

  .notice-box .top{
    display:flex;
    justify-content: space-between;

  }

  .notice-box .label{
    font-size: 1.2rem;
    color: white;
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .notice-box .top{
    display:flex;
    justify-content: space-between;
    align-items: center;

  }

  .notice-box .label img{
    height:1.5rem;
    width:auto;
  }


  .notice-box .content p{
    margin:0;
    font-size:1.2rem;
    color: white;
  }



  .notice-box .toggle-icon svg > *{
    color: white;
  }

  .notice-box .content ul{
    margin: 1rem 0;
    padding-inline-start: 2.5rem;
  }

  .minimize .content{
    display: none !important;
  }

  .minimize .toggle-icon{
    transform: rotate(180deg);
  }


  /* Login / Register Banner */
  .sign-banner-wrapper{
    padding:0 1.5rem;
  }

  .cus-input{
    display: flex;
  }

  .cus-input input{
    width:60%;
    border-radius: 0.8rem 0 0 0.8rem;
  }

  .cus-input button{
    width:40%;
    border-radius: 0 0.8rem 0.8rem 0;
    border:none;
    background: var(--theme-clr-event-active);
    font-size: 1.4rem;
    color: black;
    font-weight: var(--fw-semibold);
  }

  .cus-input button:disabled{
    background: var(--theme-clr-btn-disabled);
    color: var(--theme-clr-text-disabled);
    font-weight: var(--fw-medium);
  }

  @media only screen and (max-width:350px){
    .ifb-wrapper{
      height: 8rem;
    }

    .ifb-img{
      height: 10rem;
    }

    .ifb-img img{
      height:100%;
    }

    .ifb-wrapper .title{
      font-size:1.6rem;
    }
  }

  .profile-options-wrapper{
    padding: 2.5rem 1.5rem;
    flex-grow: 1;
  }

  .profile-options-wrapper .options{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
    justify-content: space-between;
  }

  .profile-options-wrapper .option{
    /*background: #252833;*/
    background: var(--theme-clr-form);
    flex: 0 0 calc(50% - 0.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    border-radius:0.8rem;
    min-height: 10rem;
    text-align: center;
    min-width:10rem;
    border: 1px solid var(--theme-clr-gold);
    text-decoration:none;
  }

  .profile-options-wrapper .option span{
    font-size:1.2rem;
    font-weight: var(--fw-medium);
  }

  .profile-options-wrapper .option svg > *{
    color: var(--theme-clr-gold);
  }

  .btn-logout{
    background: var(--theme-grd-primary-active);
    border: var(--theme-brd-btn-active);
    color: black;
    width:100%;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    padding: 1.5rem;
    font-weight: var(--fw-semibold);
  }

  .profile-body{
    height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .font-status{
    padding-left: 1rem;
    position:relative;
  }

  .font-status:before{
    content: '';
    position: absolute;
    left:0;
    top:50%;
    height:0.5rem;
    width:0.5rem;
    border-radius: 100%;
    transform: translateY(-50%);
    box-sizing: border-box;
  }

  .font-status.fail:before{
    background: var(--clr-fail);
  }

  .font-status.success:before{
    background: var(--clr-success);
  }

  .font-status.pending:before{
    background: var(--clr-pending);
  }

  .font-status.pending{
    color: var(--clr-pending);
  }

  .font-status.success{
    color: var(--clr-success);
  }

  .font-status.fail{
    color: var(--clr-fail);
  }

  .notification-table td{
    font-weight: var(--fw-semibold) !important;
  }

  .notification-table .read td{
    font-weight: var(--fw-regular) !important;
  }

  .notification-table .n-subject{
    white-space:wrap !important;
  }

  #n-inbox .subject{
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
    margin-bottom:0.5rem;
  }

  #n-inbox .receiver, #n-inbox .sender{
    font-size: 1.2rem;
    font-weight: var(--fw-semibold);
  }

  #n-inbox .receiver, #n-inbox .description{
    margin-bottom:1rem;
  }

  #n-inbox .n-date{
    font-size: 1.2rem;
    font-weight: var(--fw-regular);
    font-style: italic;
    margin-bottom:0.5rem;
  }

  #n-inbox .n-divider{
    margin:1rem 0;
    box-sizing: border-box;
    height:0.1rem;
    width:100%;
    background:var(--clr-inactive);
  }

  #n-inbox .content-body{
    padding:2.5rem 0;
  }

  .angpao-wrapper{
    padding:0.5rem;
    display: flex;
    flex-wrap: wrap;
  }

  .angpao{
    flex: 0 0 33.333%;
    margin-bottom:1.5rem;
    box-sizing: border-box;
  }

  .angpao img{
    width:100%;
    position: relative;
    filter: drop-shadow(0 0 5px var(--theme-clr-gold));
  }


  .angpao .title{
    font-size: 1.2rem;
    font-weight: var(--fw-medium);
    margin-top:0.5rem;
    text-align:center;
  }

  #angpao-detail .btn{
    padding: 1rem;
    width:100%;
    margin-top:1.5rem;
  }

  .copy-field{
    display: flex;
  }

  .copy-field input{
    width:75%;
    border-radius: 0.8rem 0 0 0.8rem;
  }

  .copy-field .copy{
    width:25%;
    margin: auto;
    background-color: var(--theme-clr-gold);
    text-align: center;
    height: 100%;
    border-radius: 0 0.8rem 0.8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .copy span{
    color: black;
    font-weight: var(--fw-semibold  );
  }

  #apk-game-info form{
    margin: 0;
  }

  #apk-game-info .game-logo{
    display: flex;
    justify-content: center;
    width: 60%;
    margin: auto;
  }

  #apk-game-info .game-logo img{
    width:100%;
  }

  #apk-game-info .game-action-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top:1.5rem;
  }

  #apk-game-info .btn{
    padding: 1rem;
  }

  #btn-download{
    background: var(--theme-grd-black);
    color: var(--theme-clr-gold);
    border: 1px solid var(--theme-clr-gold);
    text-align: center;
    text-decoration: none;
  }

  .btn-deposited{
    color: white;
    background: #1dbb00;
  }

  #apk-game-info .main-wallet{
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 0.8rem;
    margin-bottom:1.5rem;

  }

  #apk-game-info .label{
    font-size:1.2rem;
  }

  #apk-game-info .user-balance{
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
  }


  #apk-game-info .currency{
    font-size: 1rem;
    font-weight: var(--fw-medium);
    color: var(--theme-clr-gold);
  }

  #apk-game-info .lbl-user-balance-test{
    font-weight: var(--fw-semibold);
  }


  .depo-game{
    display: flex;
  }

  .depo-game input{
    width:75%;
    border-radius: 0.8rem 0 0 0.8rem;
  }

  .depo-game .depo-all{
    width:25%;
    margin: auto;
    background-color: var(--theme-clr-gold);
    text-align: center;
    height: 100%;
    border-radius: 0 0.8rem 0.8rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .depo-all span{
    color: black;
    font-weight: var(--fw-semibold);
  }

  .depo-game-wrap{
    display: flex;
    gap:1rem;
  }
  #confirm-depo-game{
    width:calc(50% - 0.5rem);
  }

  #cancel-depo-game{
    width:calc(50% - 0.5rem);
    background:none;
    border:1.5px solid  white;
    color:  white;
  }

  #depo-result svg{
    margin: auto;
    width: 100%;
  }

  #depo-result svg > *{
    color: #00ff00;
  }

  #depo-result .depo-msg  {
    padding: 1rem;
    font-size:1.4rem;
    margin-bottom:1.5rem;
    text-align: center;
  }

  #back-gameinfo {
    width:100%;
  }




  .chn-wrap{
    display: flex;
    gap:0.5rem;
    flex-wrap: wrap;
  }

  .btn-chn{
    flex:0 0 calc(50% - 0.5rem);
    background:none;
    border:none;
    display: flex;
    gap:1rem;
    background:#2c2c2c;
    border-radius: 0.8rem;
    padding:0.8rem;
    align-items: center;
    opacity:0.85;
  }

  .btn-chn.selected{
    box-shadow: inset 0 0 0 1.5px var(--theme-clr-gold) !important;
    background: black;
    color: var(--theme-clr-gold);
    opacity: 1;
  }

  .btn-chn img{
    height:2.4rem;
    width: 2.4rem;
  }

  #loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: rgba(0,0,0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
    width: 100%;
  }

  .spinner {
    border: 1rem solid #ffffff;
    border-top: 1rem solid var(--theme-clr-gold);
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
    animation: loading 2s linear infinite;
  }

  @keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #createbank{
    width: 100%;
    padding: 2.5rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2.5rem;
    border-radius: 0.8rem;
    background: rgba(0,0,0,0.5);
    box-sizing: border-box;
  }

  #redirect-createbank{
    background: var(--theme-clr-gold);
    padding: 1rem 1.5rem;
    border-radius: 0.8rem;
    box-sizing: border-box;
    color: black;
    font-weight: var(--fw-semibold);
    text-decoration: none;
  }

  #loading-screen img{
    width: 60%;
    max-width: 250px;
    height: auto;
    animation: drotate 3s linear infinite;
  }

  @keyframes drotate{
    from {
      transform: rotateY(0deg);

      filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));

    }
    to {
      transform: rotateY(360deg);
      filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 1));
    }

  }

  @media only screen and (max-width:300px){
    .promotion-card .promotion-action .col-1{
      display: flex;
      background: rgba(0,0,0,0.25);
      padding: 1rem;
      align-items: center;
      flex-direction: column;
      flex-wrap:wrap;
      gap:0.8rem;
    }

    .promotion-card .default-amount{
      width:100%;
    }

    .promotion-card .amount-wrap{
      display:flex;
      width:100%;
      gap:0.8rem;
      align-items:center;
      justify-content: space-between;
    }

    .promotion-card .action-wrapper{
      width:100%;
    }

    .promotion-card .action-wrapper .small-btn{
      width:50%;
      text-align:center;
    }
  }

  .swal-overlay{
    z-index: 19888888888 !important;
  }

  .warning-wrapper{
    display: flex;
    flex-direction: column;
    gap:2.5rem;
    align-items: center;
    justify-content: center;
    padding:2.5rem 1.5rem;
  }

  .warning-wrapper svg > *{
    color:#b90e0e;
  }

  .warning-wrapper .warning-text{
    text-align: center;
  }

  .swal-text:last-child{
    text-align: center;
    margin-bottom:2.5rem
  }

  .partner-wrapper{
    padding: 0 1rem;
  }

  .partner-wrapper > div{
    margin-bottom: 1.5rem;
  }

  .partner-wrapper label{
    font-size: 1.4rem;
    font-weight: var(--fw-regular);
  }

  .partner-wrapper .content {
    padding-top:1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .partner-wrapper .content img{
    display: flex;
    max-height: 2.4rem;
  }

  input.read-only{
    border: none;
    border-radius: 0.8rem;
    padding: 1rem;
    color: rgb(255, 255, 255);
    font-size: 1.6rem;
    font-weight: var(--fw-medium);
    background-color: #ffffff0f;
  }

  .ranking-wrapper{
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .ranking-filter{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ranking-options{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
    border-radius: 10rem;
    background-color: var(--theme-clr-event-main);
  }

  .ranking-options .option{
    padding: 1rem 1.5rem;
    color: white;
    opacity: 0.5;
    font-weight: 600;
    font-size: 1.6rem;
    border-radius: 2.5rem;
    width: 12rem;
    border: none;
    background: transparent;
  }

  .ranking-options .option.selected{
    opacity: 1;
    background: linear-gradient(4deg, black, #0000000d);
    border-radius: 10rem;
    color: #d9a100;
    box-shadow: 0 0 6px 1px #ffa5009e;
  }

  .ranking-wrapper > .title{
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem
  }

  .ranking-wrapper .red{
    color: #ff0707;
  }

  .ranking-wrapper .red-point{
    height: 0.65rem;
    width: 0.65rem;
    border-radius: 100%;
    background: #ff0000;
    animation: blink 1.5s linear infinite;
  }

  .table-transactions {
    border-collapse: collapse;
    width: 100%;
    position: relative;
     background-color: rgb(45 35 0 / 85%);
    background-image: url(../images/ranking-board.png);
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;

    font-size: 1.4rem;
    border-radius: 0.8rem;
  }

  .score-table{
    position: relative;
    margin: 2rem auto;
    width: 90%;
    padding: 3px;
    box-sizing: border-box;
     box-shadow: 0 5px 15px 3px #000000;
  }

  .score-table::before {
    content: '';
    background: linear-gradient(142deg, #dba352 0%, #ecbc4c 32%, #caa341 69%, #efcd6b 100%);
    position: absolute;
    width: calc(100%);
    display: block;
    top: 0;
    left: 0;
    height: calc(100%);
    border-radius: 8px;
  }

  .table-transactions td, th{
    padding: 1.5rem 0.8rem;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
  }

  .table-transactions td{
      font-weight: 400;
      font-size: 14px;
  }

  .table-transactions th{
      /* background-color: black; */
      text-transform: uppercase;
  }

  .table-transactions th:first-child{
      border-radius: 0.8rem 0 0 0;
  }

  .table-transactions th:last-child{
    border-radius: 0 0.8rem 0 0;
  }

  #download-wrapper{
    background-image: url(../img/download-background.html);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #download-app{
    font-size:1.4rem;
    padding:0.5rem 1rem;
    box-sizing: border-box;
  }

  #download-wrapper .col-1{
    display: flex;
    flex-direction: column;
    gap:0.3rem;
  }

  #download-wrapper .col-1 .title{
    font-size:1.4rem;
    font-weight: var(--fw-extrabold);
    background: var(--theme-grd-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 0 3px rgba(0,0,0,100%));
  }

  #download-wrapper .col-1 .description{
    font-size: 1.1rem;
    font-weight: var(--fw-regular);
  }

  #download-wrapper .col-2{
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .fund-option{
    display: flex;
    flex: 0 0 25%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
  }

  .fund-option .outer-box{
    background: var(--clr-bg-gold);
    padding: 0.2rem;
    box-sizing: border-box;
    border-radius: 0.8rem;
    border: none;
  }

  .fund-option .inner-box{
    padding: 0.8rem;
    box-sizing: border-box;
    background: linear-gradient(0deg, black, #464242);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:0.8rem;
    border: none;
  }

  .fund-option .inner-box img{
    width: 2.4rem;
    height: 2.4rem;
  }

  .fund-option label{
    font-size: 1.1rem;
    font-weight: var(--fw-medium);
  }

  #burn-credit .title{
    text-align: center;
    font-size: 1.4rem;
  }

  #burn-credit .notice{
    background: rgba(0,0,0,0.15);
    border-radius: 0.8rem;
    padding: 1.5rem 1rem;
  }

  #burn-credit ol{
    padding-inline-start: 2rem !important;
    margin: 0;
  }

  #burn-credit li{
    font-size:1.2rem;
  }

  .btn:disabled {
    filter: grayscale(1) brightness(0.5);
  }

  .cus-scrollbar::-webkit-scrollbar {
    height: 0.5rem;
  }

  .cus-scrollbar::-webkit-scrollbar-thumb {
      background: rgb(90 90 90);
      border-radius: 1rem;
  }

  .cus-scrollbar::-webkit-scrollbar-track {
      border-radius: 0 0 1rem 1rem;
      background-color: #1A1A1A;
  }

  .hide-scrollbar::-webkit-scrollbar {
    height: 0rem;
  }

  .hide-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 0rem;
  }

  .hide-scrollbar::-webkit-scrollbar-track {
    border-radius: 0;
  }

  #tutorial{
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    background: var(--theme-bg-topmenu);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 2.5rem;
  }


  #blog-filter{
    display: flex;
    gap: 5px;
    gap: 8px;
    flex-wrap: wrap;

  }

  #blog-filter .option{
    font-size: 14px;
    color: white;
    background: black;
    padding: 5px 8px;
    border-radius: 5px;
    border: 2px solid black;
    color: #b1b1b1;
  }

  #blog-filter .option.active{
    border: 2px solid var(--theme-clr-event-active);
    color: #f5cf6e
  }

  #blog-wrapper{
    width: 100%;
    overflow-x: hidden;
  }

  #blog-wrapper .blog img{
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 10px 5px #f5cf6e8c;
  }

  #blog-wrapper .blog {
    height: 100%;
    position: relative;
    transition: 1s;
    position: relative;
    border-radius: 8px;
  }

  #blog-wrapper .hidden{
    animation: hideblog 1s forwards ;
  }

  #blog-wrapper .hidden > *{
    display:none;
  }

  #blog-wrapper .show{
    animation: showblog 1s forwards;
    margin: 1rem 1rem 2rem;
  }

  .blog .preview{
    position: absolute;
    background: rgba(7, 7, 7, 0.75);
    bottom: 0;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding: 1rem;
    align-items: center;
    border-radius: 0 0 8px 8px;
  }

  .blog .preview h4{
    color: white;
    font-size: 14px;
    font-weight: 600;
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;

  }

  .blog .preview a{
    font-size: 14px;
    text-decoration: none;
    color: var(--theme-clr-event-active);
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .blog .preview a svg *{
    color: var(--theme-clr-event-active);
  }

  @keyframes hideblog{
    from{
      transform: scale(1);
    }
    to{
      transform: scale(0);
    }
  }


  @keyframes showblog{
    from{
      transform: scale(0);
    }
    to{
      transform: scale(1);
    }
  }

  #blog-content-wrapper{
    width:100%;
    overflow: hidden;
    padding: 1rem;
    box-sizing: border-box;
  }

  #blog-content-wrapper > *, #game-content-wrapper > *{
    max-width: 100%;
  }

  #blog-content-wrapper img, #game-content-wrapper img{
    max-width: 100%;
  }

  #game-content-wrapper{
    padding: 2.5rem 2rem 15.5rem;
    margin-bottom: -10rem;
    width: 100%;
    box-sizing: border-box;
    background: rgb(32, 32, 32);
    position: relative;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
  }

  #game-content-wrapper.showless{
    height: 500px;
    overflow: hidden;
  }

  .content-toggle{
    position: absolute;
    padding-top: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 140px;
    display: flex;
    background: transparent;
    align-items: flex-start;
  }

  .showless .content-toggle{
    background: linear-gradient(180deg, rgba(32,32,32,0) 0, rgba(32,32,32,0) 25%, rgba(32,32,32,0.8) 40% , rgba(32,32,32,1) 70%);
    padding-top: 100px;
  }

  #btn-toggle svg{
    transform: rotate(180deg);
  }

  .showless #btn-toggle svg{
    transform: rotate(0deg);
  }

  #btn-toggle{
    margin: 0 auto;
    width: 100%;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
  }