.loaderImg {
    height: 100%;
  }

  .loaderImg img {
    width: 160px;
    position: absolute;
    left: 0;
    top: -100px;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    transform: none;
  }
/* New Sidebar */
.sidebar-nav {
    background-image: url("/static/img/bg/sidebar-web-bg.png"), linear-gradient(to bottom, #3F248900 0%, #882323 10%, #351010 21%, #882323 100%);
    position: relative;
    z-index: 1039;
    /* width: 280px; */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    transition: width .25s ease-in-out;
    background-repeat: no-repeat;
    background-size: 100%;
    opacity: 0;
    display: none;
  }

  .sidebar-nav.active {
    display: flex;
    width: 280px;
    opacity: 1;
  }

  .sidebar-nav.fold {
    display: flex;
    width: 80px;
    overflow-y: visible;
    padding: 0;
    background-image: url("/static/img/bg/sidebar-web-fold-bg.png"), linear-gradient(to bottom, #3F248900 0%, #882323 10%, #351010 21%, #882323 100%);
    opacity: 1;
  }

  .sidebar-nav.fold .nav-fold-img,
  .sidebar-nav.active .nav-expand-img {
    display: block;
  }

  .sidebar-nav.fold .nav-expand-img,
  .sidebar-nav.active .nav-fold-img {
    display: none;
  }

  .sidebar-nav .nav-items .nav-expand-img img {
    width: 30px;
    height: 30px;
  }

  .sidebar-nav .sidebar-wrapper::-webkit-scrollbar {
    width: 3px !important;
    display: initial !important;
  }

  .sidebar-nav .sidebar-wrapper {
    overflow-x: hidden;
    position: relative;
    margin-top: 55px;
    padding: 0 15px;
    scrollbar-width: thin;
    scrollbar-color: #5D42B4 #374089 !important;
  }

  .sidebar-nav.fold .sidebar-wrapper {
    margin-top: 60px;
    padding: 0;
  }

  .sidebar-nav .sidebar-wrapper::-webkit-scrollbar-track {
    background: #374089 !important;
  }

  .sidebar-nav .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: #5D42B4 !important;
  }

  .sidebar-nav .nav-arrow {
    position: absolute;
    right: 0;
    top: 15px;
    transform: translate(50%);
  }

  .sidebar-nav.fold .nav-arrow {
    right: 50%;
  }

  .sidebar-nav .arrow-btn-container {
    background-image: linear-gradient(to bottom, #a45353 0%, #871212 100%);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
  }

  .sidebar-nav .nav-items-container {
    border-bottom: 2px solid #efb824;
    padding: 5px 0;
  }

  .sidebar-nav .nav-items-container:last-child {
    border-bottom: 0;
  }

  .sidebar-nav .nav-items,
  .sidebar-nav .nav-items:active,
  .sidebar-nav .nav-items:focus,
  .sidebar-nav .nav-items:visited {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    margin: 5px 0;
    position: relative;
  }

  .sidebar-nav.fold .nav-items,
  .sidebar-nav.fold .nav-items:active,
  .sidebar-nav.fold .nav-items:focus,
  .sidebar-nav.fold .nav-items:visited {
    padding: 8px;
    max-width: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  .sidebar-nav.fold #nav-lang-wrapper .nav-lang,
  .sidebar-nav.fold #nav-lang-wrapper .nav-lang:active,
  .sidebar-nav.fold #nav-lang-wrapper .nav-lang:focus,
  .sidebar-nav.fold #nav-lang-wrapper .nav-lang:visited,
  .sidebar-nav.fold #nav-lang-wrapper .nav-langs {
    max-width: unset;
  }

  .sidebar-nav .nav-items.active,
  .sidebar-nav .nav-items:hover {
    background-color: #973535;
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
  }

  .sidebar-nav .nav-items.big-nav.active {
    background-color: unset;
  }

  .sidebar-nav.fold .nav-items.big-nav.active {
    background-color: #973535;
  }

  .sidebar-nav .nav-items-dropdown .nav-items.nav-langs,
  .sidebar-nav .nav-items-dropdown .nav-desc-lang {
    color: #fff;
    cursor: pointer;
  }

  .sidebar-nav .nav-items-dropdown .nav-items {
    color: #9C69ED;
  }

  .sidebar-nav .nav-items-dropdown .nav-items.active,
  .sidebar-nav .nav-items-dropdown .nav-items:hover {
    background-color: unset;
    border-radius: 0;
    color: #fff;
  }

  .sidebar-nav .nav-items-dropdown .nav-items.nav-lang,
  .sidebar-nav .nav-items-dropdown .nav-items.nav-lang {
    color: #fff;
  }

  .sidebar-nav .nav-items-dropdown .nav-items.nav-lang.active,
  .sidebar-nav .nav-items-dropdown .nav-items.nav-lang:hover {
    background-color: #5D42B4;
    border-radius: 10px;
    color: #fff;
  }

  .sidebar-nav .nav-items {
    justify-content: flex-start;
  }

  .sidebar-nav .nav-items.nav-arrow {
    justify-content: flex-end;
  }

  .sidebar-nav.fold .nav-items {
    justify-content: center;
  }

  .sidebar-nav .nav-items img {
    width: 25px;
    height: 25px;
  }

  .sidebar-nav.fold .nav-items img {
    width: 20px;
    height: 20px;
  }

  .sidebar-nav.fold .nav-items.event-menu img {
    width: 30px;
    height: 30px;
  }

  .sidebar-nav .nav-items.nav-arrow,
  .sidebar-nav .nav-items.nav-arrow:active,
  .sidebar-nav .nav-items.nav-arrow:focus,
  .sidebar-nav .nav-items.nav-arrow:visited,
  .sidebar-nav .nav-items.nav-arrow:hover,
  .sidebar-nav .nav-items-dropdown .nav-items.nav-langs:hover {
    background-color: transparent;
    cursor: auto;
  }

  .sidebar-nav .nav-items .dropdown-arrow {
    position: absolute;
    right: 15px;
    transform: rotate(90deg);
    font-size: 10px;
  }

  .nav-items-dropdown {
    /* background-color: #7A58D9;
border-radius: 10px; */
    display: none;
  }

  /* .sidebar-nav .big-nav.nav-expanded {
background: #5D42B4;
border-radius: 30px;
} */

  .sidebar-nav .big-nav.nav-expanded .dropdown-arrow {
    transform: rotate(270deg);
  }

  .nav-tooltip-holder {
    position: absolute;
    top: -35%;
    background: #EEE8FF;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    color: #2C2C2C;
    white-space: nowrap;
  }

  .nav-tooltip {
    position: relative;
    text-align: center;
  }

  .nav-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #EEE8FF transparent transparent transparent;
  }

  .sidebar-nav .nav-items-dropdown .nav-dropdown-child {
    padding-left: 52px;
  }

  .sidebar-nav.fold .nav-items-wrapper {
    position: relative;
  }

  .sidebar-nav.fold .nav-items-dropdown {
    position: absolute;
    left: 42px;
    top: 0;
    width: max-content;
    background-color: #7A58D9;
    border-radius: 10px;
    color: #fff;
  }

  .sidebar-nav.fold .nav-items-dropdown .nav-items {
    padding-left: 20px;
    padding: 10px 20px;
    justify-content: flex-start;
    color: #fff;
  }

  .nav-vip-items,
  .nav-vip-items:active,
  .nav-vip-items:hover,
  .nav-vip-items:focus {
    color: #fff;
    display: flex;
    gap: 10px;
    background: #291464;
    border-radius: 10px;
    padding: 10px;
    align-items: center;
    font-size: 12px;
    margin-bottom: 10px;
    justify-content: center;
  }

  .nav-vip-items .vip-level-img img {
    width: 35px;
    height: 35px;
  }

  .vip-level-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
  }

  .vip-progress-percent {
    display: flex;
    gap: 10px;
    justify-content: space-between;
  }

  .vip-progress-percent .current-percent {
    color: #F9BB1F;
  }

  .vip-progress-bar {
    background: #969696;
    height: 5px;
    border-radius: 5px;
    position: relative;
  }

  .vip-current-progress-bar {
    background: linear-gradient(to right, #FABB1F 0%, #FF6200 100%);
    height: 5px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
  }

  .vip-next-update {
    display: flex;
    justify-content: space-between;
  }

  .vip-next-update .next-level {
    color: #9C69ED;
  }

  .sidebar-nav.fold .nav-vip-items {
    background: unset;
    margin-bottom: 0;
    padding: 8px;
  }

  .sidebar-nav.fold .nav-vip-items img {
    width: 30px;
    height: 30px;
  }

  .sidebar-nav.fold .vip-level-details {
    display: none;
  }

  .sidebar-nav .nav-lang-container {
    position: relative;
    padding: 0 15px;
  }

  .sidebar-nav.fold .nav-lang-container {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  .sidebar-nav #nav-lang-wrapper .nav-items-dropdown {
    position: absolute;
    bottom: 60px;
    max-height: 300px;
    overflow-y: auto;
    background-color: #7A58D9;
    width: 100%;
    border-radius: 10px;
    left: 0;
    padding: 0 5px;
  }

  .sidebar-nav.fold #nav-lang-wrapper .nav-items-dropdown {
    display: block;
    left: 42px;
    top: unset;
    bottom: 0;
    max-height: 300px;
    overflow-y: auto;
    width: max-content;
  }

  /* Nav User Details Section */
  .nav-user-details-container {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  /* User Info Head */
  .nav-user-details-container .user-info-head {
    display: flex;
    background: #382080;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .nav-user-details-container .user-profile-holder {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .nav-user-details-container .user-profile-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
  }

  .nav-user-details-container .user-verify-holder {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
  }

  .nav-user-details-container .dashboard-profile-user-verified-container {
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .nav-user-details-container .dashboard-profile-user-verified-container span {
    font-size: 12px;
  }

  .nav-user-details-container .user-profile-arrow {
    color: #6E83B7;
  }

  /* User Info Body */
  .nav-user-details-container .user-info-body {
    background: #553B9F;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .nav-user-details-container .user-info-body .user-wallet-holder {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .nav-user-details-container .user-info-body .restore-button {
    background: #442B89;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: none;
    color: #CACACA;
    padding: 5px;
    font-size: 10px;
    cursor: pointer;
  }

  .nav-user-details-container .user-info-body .verify-wallet-lock-balance {
    margin-bottom: unset;
    margin-top: unset;
  }

  .nav-user-details-container .user-info-body .user-action-holder {
    display: flex;
    gap: 15px;
  }

  .nav-user-details-container .user-info-body .credit-action-btn,
  .nav-user-details-container .user-info-body .credit-action-btn:active,
  .nav-user-details-container .user-info-body .credit-action-btn:hover,
  .nav-user-details-container .user-info-body .credit-action-btn:focus {
    width: 50%;
    text-align: center;
    background-color: #7B5BD6;
    border-radius: 15px;
    padding: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }

  .sidebar-nav .integration-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
  }

  .sidebar-nav.fold .integration-nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }

  .sidebar-nav .nav-items.event-menu {
    background: #5b0505;
    border-radius: 10px;
    min-height: 70px;
    margin: 0;
    padding: 8px;
  }

  .sidebar-nav .nav-items.event-menu .nav-desc {
    font-weight: 600;
    font-size: 12px;
    word-break: break-all;
  }

  .sidebar-nav .nav-items.event-menu .nav-desc .event-desc-color {
    color: #FEC04C;
  }

  .sidebar-nav .nav-items.event-menu .nav-desc .event-desc-normal {
    color: #fff;
  }

  .sidebar-nav.fold .nav-items.event-menu {
    min-height: auto;
    background: unset;
    border-radius: unset;
  }

  .sidebar-nav .nav-vip-normal {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    gap: 10px;
    color: #fff;
    background: #5b0505;
  }

  .sidebar-nav .nav-vip-normal .vip-text-title {
    color: #fff;
  }

  .sidebar-nav .nav-vip-normal .vip-text-body {
    color: #FABB1F;
    font-size: 10px;
  }

  .sidebar-nav.fold .nav-vip-normal {
    justify-content: center;
    background: unset;
    margin-bottom: 0;
  }

  .nav-langs-country-container {
    border-bottom: 1px #a18bdb dotted;
  }

  .nav-langs-country-container:last-child {
    border-bottom: 0;
  }

  .nav-expand-img.nav-lucky-spin {
    position: relative;
  }

  .sidebar-nav .nav-lucky-spin .nav-lucky-spin-icon {
    width: 30px;
    height: 30px;
  }

  .nav-expand-img.nav-lucky-spin .star-vector {
    position: absolute;
    top: -2px;
    left: 2px;
  }

  .sidebar-nav.fold .nav-lucky-spin-icon {
    width: 30px;
    height: 30px;
  }

  @media screen and (max-width: 800px) {
    .sidebar-nav.fold {
      display: none;
    }

    .sidebar-nav.active {
      display: flex;
      width: 100%;
      background-image: url("/static/img/bg/sidebar-web-bg.png?v=8"), linear-gradient(to bottom, #3F248900 0%, #882323 10%, #351010 21%, #882323 100%);
      /* overflow: auto; */
      position: fixed;
      height: 100%;
    }

    .sidebar-nav.active .nav-arrow {
      right: 30px;
      transform: unset;
      top: 15px;
      color: #efb824;
    }

    .sidebar-nav .nav-expand-img,
    .sidebar-nav.active .nav-fold-img {
      display: none;
    }

    .sidebar-nav .nav-fold-img,
    .sidebar-nav.active .nav-expand-img {
      display: block;
    }

    .sidebar-nav.active .sidebar-wrapper {
      width: 100%;
      overflow-y: auto;
      margin-top: 45px;
      padding: 0 15px;
    }

    .sidebar-nav.active .arrow-btn-container {
      padding: unset;
      background-image: unset;
      font-size: 16px;
    }

    .sidebar-nav.active .nav-items img {
      width: 25px;
      height: 25px;
    }

    .sidebar-nav.active .nav-items,
    .sidebar-nav.active .nav-items:active,
    .sidebar-nav.active .nav-items:focus,
    .sidebar-nav.active .nav-items:visited {
      justify-content: flex-start;
      /* padding: 10px; */
      margin: 5px 0;
      max-width: unset;
    }

    .sidebar-nav.active .nav-items.nav-arrow {
      justify-content: flex-end;
    }

    .sidebar-nav.active .nav-items.nav-arrow .icon-untick {
      color: #9C69ED;
    }

    .sidebar-nav.active .nav-items-dropdown {
      position: unset;
      width: 100%;
      background-color: unset;
    }

    .sidebar-nav.active .nav-items-dropdown .nav-items {
      color: #9C69ED;
    }

    .sidebar-nav.active .nav-items-dropdown .nav-items.active {
      color: #fff;
    }

    .sidebar-nav .nav-items-dropdown .nav-items.nav-lang,
    .sidebar-nav .nav-items-dropdown .nav-items.nav-lang {
      color: #fff;
    }

    .sidebar-nav.active .nav-vip-items {
      background: #291464;
      margin-bottom: 10px;
    }

    .sidebar-nav.active .vip-level-details {
      display: flex;
    }

    .sidebar-nav.active #nav-lang-wrapper .nav-items-dropdown {
      display: none;
      left: 0;
      width: 100%;
      bottom: 50px;
    }

    .sidebar-nav.active .integration-nav {
      grid-template-columns: 1fr 1fr;
      justify-items: unset;
      gap: 8px;
    }

    .sidebar-nav.active .nav-items.event-menu {
      background: #5b0505;
      border-radius: 10px;
      min-height: 70px;
      margin: 0;
      padding: 8px;
    }

    .sidebar-nav.active .nav-vip-normal {
      justify-content: flex-start;
      background: #5b0505;
      gap: 15px;
    }

    .sidebar-nav.active .nav-lang-container {
      width: 100%;
      padding: 0 15px;
    }

    .sidebar-nav.active .nav-items .nav-expand-img img {
      width: 50px;
      height: 44px;
    }

    .nav-expand-img.nav-lucky-spin .nav-lucky-spin-icon {
      width: 50px;
      height: 44px;
    }

    .sidebar-nav.active .nav-vip-normal img {
      width: 50px;
      height: 44px;
    }

    .sidebar-nav .nav-vip-normal .vip-text-body {
      font-size: 12px;
    }

    .sidebar-nav.active .nav-vip-items img {
      width: 50px;
      height: 44px;
    }

    .sidebar-nav .nav-items.event-menu .nav-desc {
      font-size: 14px;
    }
  }

.topbar-menu-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-menu-inner-right {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.live-support,
.btnLanguage .limg {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 11px;
    background: #390707;
    border-radius: 10px;
}

.top-wallet .user-balance {
    color: #fff;
}

.tooltip.top .tooltip-arrow {
    border-top-color: transparent;
}

#mbtnDeposit {
    display: flex;
    gap: 5px;
    max-width: 90px;
}

#mbtnDeposit .top-balance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mobile-login-holder,
.mobile-register-holder {
    text-align: center;
}

/* Mobile Login / Reg CSS */
.user-loginReg-holder {
    text-align: center;
    height: 100%;
    max-height: 100%;
    position: fixed;
    width: 100%;
    z-index: 1090;
}

.user-loginReg-holder .modal-header {
    padding: 0;
}

.user-loginReg-holder .panel-header-inner {
    display: inline-flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.user-loginReg-holder .modal-title {
    font-size: 22px;
}

.user-loginReg-holder .info-2.regInfo {
    justify-content: center;
    display: flex;
    align-items: center;
}

.user-loginReg-holder .button-submit {
    width: 80%;
    border-radius: 12px;
}

.user-loginReg-holder .register-progress .prog.p1,
.user-loginReg-holder .register-progress .prog.p2 {
    margin-right: 100px
}

.user-loginReg-holder .register-progress .prog.p1:after,
.user-loginReg-holder .register-progress .prog.p2:after {
    width: 110px;
}

.user-loginReg-holder .register-progress .prog.p1.active:after,
.user-loginReg-holder .register-progress .prog.p2.active:after {
    top: 18px;
    left: 39px;
}

.user-loginReg-holder .register-progress .prog.p1:after,
.user-loginReg-holder .register-progress .prog.p2:after {
    top: 20px;
    left: 38px;
}

.user-loginReg-holder .register-progress .prog,
.user-loginReg-holder .register-progress .prog.active {
    height: 40px;
    width: 40px;
    line-height: 40px;
}

.user-loginReg-holder .section-setting {
    height: 100%;
}

.user-loginReg-holder .modal-body {
    padding-top: 0;
    overflow-y: auto;
}

.user-loginReg-holder .modal-cont {
    padding-top: 30px;
}

.user-loginReg-holder .right-container {
    height: 100%;
    overflow-x: hidden;
}

.mob-button {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
}

.topbar-logged-in-holder {
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}

.topbar-logged-in-holder .topbar-credit-balance {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 2px solid #efb824;
    border-radius: 10px;
    max-width: 200px;
}

.topbar-logged-in-holder .topbar-credit-action {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(to bottom, #973535 , #973535);
    border-radius: 10px;
    border: none;
    padding: 10px 15px;
}

.topbar-logged-in-holder .credit-action-btn,
.topbar-logged-in-holder .credit-action-btn:hover,
.topbar-logged-in-holder .credit-action-btn:active,
.topbar-logged-in-holder .credit-action-btn:focus {
    color: #fff;
}

.topbar-logged-in-holder .restore-button {
    background: #707070;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: none;
    color: #060C38;
    padding: 5px;
    font-size: 10px;
    cursor: pointer;
}

.topbar-profile-dropdown {
    background: #390707;
    padding: 10px;
    border-radius: 10px;
    height: 42px;
}

.topbar-profile-dropdown img {
    width: 25px;
    min-width: 25px;
    max-width: 25px;
    height: 24px;
}

.topbar-dropdown-menu {
    position: absolute;
    top: 50px;
    right: 0;
    width: 270px;
    border-radius: 10px;
    overflow: hidden;
    z-index: 1070;
}

.topbar-dropdown-menu .topbar-dropdown-menu-profile,
.topbar-dropdown-menu .topbar-dropdown-menu-profile:hover,
.topbar-dropdown-menu .topbar-dropdown-menu-profile:focus,
.topbar-dropdown-menu .topbar-dropdown-menu-profile:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #780d0d;
    padding: 10px 15px 10px 10px;
    cursor: pointer;
    color: #fff;
}

.topbar-dropdown-menu .topbar-dropdown-menu-profile .user-profile-holder {
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-dropdown-menu .topbar-dropdown-menu-profile .user-profile-holder .user-profile-arrow {
    color: #6E83B7;
}

.topbar-dropdown-menu .topbar-dropdown-menu-credit {
    background-color: #383F76;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topbar-dropdown-menu .dashboard-user-verification-details {
    text-align: center;
}

.topbar-dropdown-menu .topbar-dropdown-menu-credit .user-wallet-holder {
    display: flex;
    gap: 20px;
    align-items: center;
}

.topbar-dropdown-menu .topbar-dropdown-menu-credit .restore-button {
    background: #4E5698;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border: none;
    color: #CACACA;
    padding: 5px;
    font-size: 10px;
    cursor: pointer;
}

.topbar-dropdown-menu .topbar-dropdown-menu-credit .verify-wallet-lock-balance {
    width: 100%;
    margin-bottom: unset;
    margin-top: unset;
}

.topbar-dropdown-menu .topbar-dropdown-menu-verify {
    background-color: #5B64A2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
}

.topbar-dropdown-menu-list {
    background-color: #763838;
    display: flex;
    flex-direction: column;
}

.topbar-dropdown-menu-list .dashboard-menu,
.topbar-dropdown-menu-list .dashboard-menu:focus,
.topbar-dropdown-menu-list .dashboard-menu:active {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    color: #fff;
    padding: 15px;
}

.topbar-dropdown-menu-list .dashboard-menu:hover,
.topbar-dropdown-menu-list .dashboard-menu.active {
    background: #973535;
}

.topbar-dropdown-menu-list .dashboard-menu .newNav-icon {
    max-width: 20px;
}

.mob-topbar-credit {
    border: 2px solid #efb824;
    padding: 8px;
    border-radius: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    max-width: 90px;
}

.mob-topbar-credit .top-balance {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.mob-topbar-credit-action {
    display: flex;
    gap: 5px;
    align-items: center;
}

.mob-topbar-credit-action-btn,
.mob-topbar-credit-action-btn:hover,
.mob-topbar-credit-action-btn:active,
.mob-topbar-credit-action-btn:focus {
    background: linear-gradient(to bottom, #973535 0%, #973535 100%);
    text-decoration: none;
    color: #fff;
    height: 40px;
    display: flex;
    padding: 0 8px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.mob-topbar-credit .icon-top-dollar,
.mob-topbar-credit .icon-currency-peso {
    color: #A324EF;
}

.mob-topbar-credit-action-btn [class^="icon-"],
.mob-topbar-credit-action-btn [class*="icon-"] {
    margin: auto;
    color: #fff;
    font-size: 20px;
}

.modal .label-container {
    width: 100%;
    max-width: 100%;
}

.lang-list {
    background-color: #32396F;
    border-radius: 5px;
    display: none;
    position: absolute;
    top: 35px;
    width: max-content;
    max-height: 300px;
    overflow-y: auto;
    right: 0;
    overscroll-behavior: contain;
}

.nav-items.nav-langs:after {
    content: '\e93e';
    font-family: "europe-style";
    font-size: 8px;
    color: #fff;
}

.nav-items.nav-langs.active-lang:after {
    transform: rotate(180deg);
}

.lang-list .nav-items {
    padding: 8px 20px;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    cursor: pointer;
}

.lang-list .nav-items.nav-lang:hover,
.lang-list .nav-items.nav-lang.active {
    background: #6271DE;
}

.lang-list .nav-items img {
    width: 20px;
    height: 20px;
}

#regModal .input-icon {
    gap: 5px;
}

.modal .btn_go_page {
    white-space: unset;
}

.topBar-holder .user-profile-image {
    background: #390707;
    padding: 8px;
    border-radius: 20px;
}

.topBar-holder .user-profile-image img {
    width: 15px;
}

#regModal .control_indicator {
    height: 15px;
    width: 18px;
}

#regModal .control input:checked~.control_indicator,
.user-loginReg-holder .control input:checked~.control_indicator {
    background: none;
}

.topbar-restore {
    background: linear-gradient(to bottom, #6168A3 0%, #414783 100%);
    border-radius: 23px;
    padding: 3px 0 3px 10px;
}

.topbar-restore .xBox {
    display: flex;
    align-items: center;
}

.topbar-credit-details {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topBar-right {
    height: 43px;
}

.topBar-right .menuItem {
    gap: 5px;
}

.btnLanguage .limg img {
    max-width: 20px;
}

/*Topbar Telegram*/
.telegramIcon {
    margin: 2px 0px;
    height: 40px;
    width: 40px;
    position: relative;
}

.telegramIcon img {
    width: 100%;
    border-radius: 10px;
}

.topbar-right-user-button {
    display: flex;
}

.telegramIcon.m-dev img,
.telegramIcon.m-dev.telegramIconM img {
    height: 35px;
    width: 35px;
}

.vl {
    width: 1px;
    background-color: #414141;
    height: 30px;
    display: inline-block;
    margin: 7px 10px;
}

.vl-mid {
    margin: 0;
}

@media only screen and (max-width: 1200px) {
    .topbar-logged-in-holder .topbar-credit-balance {
        max-width: 150px;
    }
}

@media only screen and (max-width: 950px) {
    .topbar-logged-in-holder .topbar-credit-balance {
        max-width: 100px;
    }
}

@media only screen and (max-width: 800px) {
    .topBar-container {
        position: unset;
        gap: 10px;
    }

    .topbar-logged-in-holder {
        gap: 5px;
    }

    .user-loginReg-holder .register-progress .prog.p1,
    .user-loginReg-holder .register-progress .prog.p2 {
        margin-right: 80px
    }

    .topbar-dropdown-menu-list {
        height: 100%;
    }

    .user-loginReg-holder .modal-header {
        padding: 15px 0 0;
    }

    .reg-checkbox {
        height: 14px;
        width: 18px;
    }

    .topbar-dropdown-menu-list .dashboard-menu,
    .topbar-dropdown-menu-list .dashboard-menu:focus,
    .topbar-dropdown-menu-list .dashboard-menu:active {
        padding: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .telegramIcon.m-dev img {
        height: 40px;
        width: 40px;
    }
}

@media only screen and (max-width: 414px) {
    .topbarButtons-holder {
        padding-top: 3px;
    }

    .telegramIcon.m-dev img {
        height: 40px;
        width: 40px;
    }

    .telegramIcon.m-dev.telegramIconM {
        margin-top: 5px;
    }
}

@media only screen and (max-width: 375px) {
    .topbarButtons-holder {
        padding-top: 3px;
    }

    .telegramIcon.m-dev img {
        height: 40px;
        width: 40px;
    }

    .telegramIcon.m-dev.telegramIconM {
        margin: 5px;
    }
}

@media only screen and (max-width: 320px) {
    .telegramIcon.m-dev.telegramIconM {
        margin-top: 8px;
    }
}

.pwa-guide-holder {
    position: fixed;
    width: 95%;
    margin: 0 auto 10px;
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(65, 65, 65, 0.7);
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 1039;
    border-radius: 15px;
    color: #fff;
    line-height: 1.5;
    font-size: 14px;
}

.pwa-guide-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
}

.pwa-header .pwa-remind {
    color: #FFDDDD;
}

.pwa-body {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 10px;
}

.pwa-body-holder {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*.pwa-body-holder img,*/
.pwa-footer img {
    max-width: 80%;
    margin: auto;
}

.pwa-body-container {
    display: flex;
    gap: 10px;
}

.pwa-body-container i {
    font-size: 20px;
}

.pwa-icon {
    min-width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*.pwa-footer{
display: flex;
align-items: center;
justify-content: center;
}*/
/*    .hoticon{
      width: 20%;
      height: 25%;
      background: #412708;
      position: absolute;
      right: 0;
      bottom: 0;
      border-top-left-radius: 100%;
      padding: 10px 0 5px 10px;
      z-index: 3;
  }*/
/*
  .newicon{
      width: 20%;
      height: 25%;
      background: #2e4a25;
      position: absolute;
      right: 0;
      bottom: 0;
      border-top-left-radius: 100%;
      padding: 10px 0 0 10px;
      z-index: 3;
  }*/

.hoticon {
    position: absolute;
    top: -5px;
    z-index: 3;
    left: 5px;
    background-image: linear-gradient(to bottom, #E25E4D, #D14444) !important;
    padding: .1em .4em;
    border-radius: 3px;
    font-size: clamp(12px, 1vw, 14px);
}

.newicon {
    position: absolute;
    top: -5px;
    z-index: 3;
    left: 5px;
    background-image: linear-gradient(to bottom, #4DD86E, #208113) !important;
    padding: .1em .4em;
    border-radius: 3px;
    font-size: clamp(12px, 1vw, 14px);
}

/* Old code */
.main-content-bg {
    position: relative;
}

.main-content-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('https://wdb-pub.s3.ap-southeast-1.amazonaws.com/frontend/asset_web/img/sport-bg-b.jpg?v=8') center no-repeat;
    background-size: cover;
    opacity: 1;
}

.ldb-layer-effect {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.section-footer,
.section-copyright,
.midbar-search {
    position: relative;
}

.mobTopWallet {
    position: relative;
}

.common-holder {
    display: none;
}

.game .skeleton-gray {
    background: rgb(40, 38, 38);
    background-image: linear-gradient(115deg, rgb(40 38 38) 20%, rgb(56 56 56) 30%, rgb(56 56 56) 35%, rgb(40 38 38) 40%);
    background-position: 0% 0;
    background-size: 300% 200%;
    color: rgba(0, 0, 0, 0);
    animation: shimmer 3s infinite;
}

.game .skeleton-gray .box:after {
    box-shadow: unset;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    60%,
    100% {
        background-position: -50% 0;
    }
}

/* New UI */
/* HOME PAGE START */
.homePage-items .header-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.homePage-items.game .more-button,
.homePage-items.game .more-button:hover,
.homePage-items.game .more-button:active,
.homePage-items.game .more-button:focus {
    border-radius: 8px;
    padding: 5px 15px;
    background: #763838;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 26px;
    text-transform: capitalize;
}

.provider-list-category {
    white-space: nowrap;
    margin-top: 10px;
    margin-bottom: 15px;
    overflow-x: auto;
}

.provider-list-category-item {
    background: transparent;
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    height: 45px;
    transition: all .2s ease-in-out;
}

.provider-list-category-item img {
    width: 0;
    margin-right: 10px;
    opacity: 0;
    transform: rotate(90deg);
    transition: transform .3s ease-in-out;
}

.provider-list-category-item.active,
.provider-list-category-item:hover {
    background: linear-gradient(to right, #973535 0%, #973535 100%);
    transform: translateX(15px);
}

.provider-list-category-item:first-child.active,
.provider-list-category-item:first-child:hover {
    transform: translateX(0);
}

.provider-list-category-item.active img,
.provider-list-category-item:hover img {
    width: auto;
    opacity: 1;
    transform: rotate(360deg);
}

.provider-list-category-item span {
    vertical-align: middle;
}

.providerGameContainer .list {
    white-space: nowrap;
    overflow-x: scroll;
}

.provider-category-item img {
    width: 100%;
}

.provider-category-item:hover {
    background: #973535;
}

.list-control-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-control-item {
    cursor: pointer;
}

.list-control-item i {
    height: 26px;
    width: 26px;
    border-radius: 8px;
    padding: 5px;
    background: #763838;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.list-control-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* HOME PAGE END */

/* GAME PAGE START */
/* Midbar providers */
.midbar-providers .provider-lists-title-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.midbar-providers .provider-lists-title {
    display: inline-flex;
    color: #fff;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}

.midbar-providers .provider-lists-title .icon-expand,
.midbar-providers .provider-lists-title .icon-collapse {
    color: #F9BB1F;
}

.midbar-providers .provider-lists-body {
    overflow: hidden;
    height: 80px;
    transition: height .5s ease;
}

.midbar-providers .provider-lists-body .provider-lists-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.midbar-providers .provider-lists-body .game-holder {
    cursor: pointer;
    border-radius: 15px;
    background: #222753;
    position: relative;
    padding: 5px 10px;
    width: calc(100% / 8 - 9px);
    display: flex;
    align-items: center;
    height: 80px;
}

.midbar-providers .provider-lists-body .game-holder.active,
.midbar-providers .provider-lists-body .game-holder:hover {
    background: #414884;
    color: #000000;
}

.midbar-providers .provider-lists-body .game-holder.active .box .image {
    filter: none;
}

.midbar-providers .provider-lists-body .game-holder .image img {
    margin-left: auto;
    margin-right: auto;
}

/* Midbar providers END */

/* Filter game section START */
.filter-game-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: relative;
}

.filter-game-container .search-bar-group {
    flex-basis: 100%;
    position: relative;
}

.filter-game-container .search_games {
    width: 100%;
    background: #222753;
    border: none;
    padding: 10px 10px 10px 40px;
    color: #fff;
    border-radius: 10px;
    height: 45px;
}

.filter-game-container .search_games::placeholder {
    color: #fff;
}

.filter-game-container .search_games:focus-visible {
    outline: 0;
}

.filter-game-container .btn-search {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.filter-game-container .filter-game-buttons {
    display: flex;
    gap: 10px;
}

.filter-game-container .filter-game-buttons .filter-game-button {
    padding: 10px;
    background: #383F76;
    border-radius: 10px;
    cursor: pointer;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
}

.filter-game-container .filter-game-buttons .filter-game-button.active {
    background: #3D4BB7;
}

.filter-game-container .dropdown-container {
    position: absolute;
    top: 50px;
    z-index: 5;
    border-radius: 10px;
    overflow: hidden;
}

/* Hide scrollbar */
.filter-game-container .filter-game-dropdown-body::-webkit-scrollbar,
.section-providers .providerGameContainer .list::-webkit-scrollbar,
.provider-list-category::-webkit-scrollbar {
    display: none;
}

.filter-game-container .filter-game-dropdown-container {
    right: 3%;
    min-width: 300px;
}

.filter-game-container .sort-game-dropdown-container {
    right: 0;
}

.filter-game-container .filter-game-dropdown-container .filter-game-dropdown-header {
    display: flex;
    background: #383F76;
    justify-content: space-between;
    padding: 10px;
    font-size: 12px;
}

.filter-game-container .filter-game-dropdown-container .filter-game-dropdown-body {
    background: #383F76;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.filter-game-dropdown-body label.control {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.filter-game-dropdown-body .provider-name-label {
    font-size: 10px !important;
    font-weight: normal !important;
}

.filter-game-dropdown-body .control_indicator {
    width: 12px;
    height: 12px;
    background: #fff;
}

.filter-game-dropdown-body .control:hover input~.control_indicator,
.filter-game-dropdown-body .control input:focus~.control_indicator {
    background: #fff;
}

.filter-game-dropdown-body .control input:checked~.control_indicator {
    background: #8F1FD2;
    border: 1px solid #6D74AD;
}

.filter-game-dropdown-body .control:hover input:not([disabled]):checked~.control_indicator,
.filter-game-dropdown-body .control input:checked:focus~.control_indicator {
    background: #8B92C6;
}

.filter-game-dropdown-body .control-checkbox .control_indicator:after {
    left: 3px;
    top: 0;
    width: 2px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.filter-game-container .filter-game-dropdown-container .filter-game-dropdown-header .all-filter-options {
    display: flex;
    gap: 10px;
}

.provider-checkbox-img {
    width: 25px;
}

.all-filter-option {
    cursor: pointer;
}

.filter-game-section .sort-game-dropdown-container {
    background: #383F76;
    min-width: 200px;
}

.filter-game-section .sort-game-dropdown-container .sort-game-dropdown-items {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    padding: 10px 0;
}

.filter-game-section .sort-game-dropdown-container .sort-game-dropdown-item {
    padding: 8px 20px;
    cursor: pointer;
}

.filter-game-section .sort-game-dropdown-container .sort-game-dropdown-item:hover,
.filter-game-section .sort-game-dropdown-container .sort-game-dropdown-item.active {
    background: #4C5391;
}

/* Filter game section END */

.all-game-container {
    position: relative;
}

.game-info-container-bg {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, .8);
    height: 100%;
    width: 100%;
    z-index: 5;
    padding: 30px;
    display: flex;
    border-radius: 10px;
}

.game-info-container {
    margin: auto;
    max-width: 800px;
}

.game-info-container .close-button {
    text-align: right;
    font-size: 25px;
    cursor: pointer;
}

.game-content-container .game-content {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.game-content-container .game-play-buttons {
    display: flex;
    gap: 10px;
}

.game-content-container .play-now {
    background: #E6601B;
}

.game-content-container .play-for-fun {
    border: 2px solid #E6601B;
}

.load-progress-bar {
    width: 100%;
    height: 3px;
    background: #373F76;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
}

.current-progress-bar {
    /* width: 20%; */
    height: 3px;
    background: #646FBE;
}

.game-shown-progress {
    margin-bottom: 20px;
}

#btnLoadGame {
    margin-left: auto;
    margin-right: auto;
    background: #363E7B;
    padding: 10px 30px;
    border-radius: 30px;
    border: 0;
}

/* Mobile providers */
.mobile-providers {
    margin-top: 20px;
}

.mobile-providers .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mobile-providers .list .game-holder {
    background: #222753;
    border-radius: 15px;
    position: relative;
    padding: 10px;
}

.mobile-providers .list .game-holder.active {
    background: #414884;
}

.mobile-providers .list .game-holder img {
    filter: brightness(0) invert(1);
}

.mobile-providers .list .game-holder.active img {
    filter: none;
}

/* GAME PAGE END */

/*promotion*/
.section-promotions {
    margin: 30px auto;
}

.promotionCategory-holder {
    overflow-x: scroll;
}

.promotionCategory-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow-x: scroll;
    width: fit-content;
    gap: 10px;
}

/* Hide scrollbar */
.promotionCategory-container::-webkit-scrollbar,
.promotionCategory-holder::-webkit-scrollbar {
    display: none;
}

.promotionButton,
.promotionButton:focus,
.promotionButton:active,
.promotionButton:hover {
    padding: 5px 20px;
    font-size: 14px;
    color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    background: #222753;
    border-radius: 10px;
    cursor: pointer;
}

.promotionButton.active {
    background: #414884;
}


.promotion-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.promotion-list .box {
    background-image: none;
}

.promotion-list .box {
    position: relative;
    vertical-align: top;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    background-image: url('../img/no-image.png');
}

.promotion-list .box .image {
    position: relative;
    border-radius: 12px;
    width: 100%;
    max-height: 350px;
}

.promotion-list .box .name-holder {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}

.promotion-list .box .name-holder .promoTtxt {
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.promotion-list .box .name-holder .remain-txt {
    font-size: 12px;
    color: #FABB1F;
}

.pd-img,
.pd-img img,
.pd-content img {
    width: 100%;
}

.pd-img img {
    max-width: 100%;
    object-fit: contain;
    border-radius: 1.5rem;
}

.pd-title {
    font-weight: bold;
    font-size: 20px;
    margin: 5px 0;
}

.pd-remain {
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: 5px;
    color: #FABB1F;
}

.pd-remain i,
.remain-time {
    color: var(--mainColor);
}

.pd-content * {
    text-indent: 0 !important;
}

.pd-content,
.pd-provider {
    text-align: left;
}

.promo-provider img {
    max-width: 30px;
    margin: 0 5px;
}

.prov-ico {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
}

.pd-content table tbody tr td,
.pd-content table thead tr td {
    width: calc(100% / 20) !important;
    padding: 2px;
    font-size: 12px !important;
    word-break: break-word;
    border: 1px solid;
}

.overlay-promo #btnPromoApply {
    margin: 20px 0;
}

/* Promo title css */
#promoDetailsModal .modal-footer {
    border-top: 0;
}

.promotionsPage .promo-provider {
    max-width: 1000px;
}

.eligible-category {
    padding: 8px;
    background: #3C4488;
    font-size: 16px;
    border-radius: 8px;
    color: #fff;
    height: fit-content;
}

.eligible-platform-list {
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 10px;
    border: 1px solid #3C4488;
    border-radius: 8px;
    flex-wrap: wrap;
}

.eligible-platform-holder img {
    max-width: 30px;
    margin: 0 5px;
}

#btnPromoApply {
    background: linear-gradient(to bottom, #FFC353 0%, #FAA302 100%);
    color: #000;
}

.promotionsPage .timer-img {
    width: 20px;
    margin-right: 5px;
}

.prov-label {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 0;
    right: 0;
}

.prov-label.new {
    top: -8px;
}

.game-main-wrapper {
    display: flex;
    flex-direction: column;
}

/* FOR PROVIDER SCROLL/EXPAND */
.midbar-providers .provider-lists-body .provider-lists-wrapper {
    display: block;
    white-space: nowrap;
    overflow-x: auto;
}

.midbar-providers .provider-lists-title-wrapper.active+.provider-lists-body .provider-lists-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    white-space: unset;
}

.midbar-providers .provider-lists-body .game-holder {
    width: calc(100% / 8 - 9px);
    display: inline-flex;
    margin-right: 10px;
}

.midbar-providers .provider-lists-body .game-holder:last-child {
    margin-right: 0;
}

.midbar-providers .provider-lists-title-wrapper.active+.provider-lists-body .game-holder {
    margin-right: 0;
}

.midbar-providers .provider-lists-title-wrapper.active+.provider-lists-body .game-holder:last-child {
    margin-right: 0;
}

@media screen and (max-width: 1700px) {
    .midbar-providers .provider-lists-body {
        height: 65px;
    }

    .midbar-providers .provider-lists-body .game-holder {
        height: 65px;
    }
}

@media screen and (max-width: 1300px) {
    .midbar-providers .provider-lists-body {
        height: 60px;
    }

    .midbar-providers .provider-lists-body .game-holder {
        width: calc(100% / 6 - 9px);
        height: 60px;
    }
}

@media screen and (max-width: 1100px) {
    .midbar-providers .provider-lists-body {
        height: 50px;
    }

    .midbar-providers .provider-lists-body .game-holder {
        height: 50px;
    }

    .promotion-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1000px) {
    .midbar-providers .provider-lists-body .game-holder {
        width: calc(100% / 5 - 9px);
    }
}

@media only screen and (max-width: 800px) {

    .homePage-items.game .more-button,
    .homePage-items.game .more-button:hover,
    .homePage-items.game .more-button:active,
    .homePage-items.game .more-button:focus {
        border-radius: 5px;
        padding: 5px 10px;
        height: 24px;
    }

    .homePage .list-control-item i {
        height: 24px;
        width: 24px;
        border-radius: 5px;
        padding: 5px;
        font-size: 10px;
    }

    .org-title {
        margin-left: 10px;
    }

    .game-filter-button .game-options {
        background: #1E1E1E;
        height: 32px;
        border-radius: 10px;
        display: inline-flex;
        justify-content: center;
        padding: unset;
        align-items: center;
    }

    .game-filter-button .game-options {
        width: 100%;
        min-width: unset;
    }

    .game-filter-button .game-options.active {
        background: #FEB909;
        color: #000000;
    }

    .overlay-game-provider .sidemenu-header {
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px 5%;
        align-items: center;
    }

    .overlay-game-provider .sidemenu-header .btn-close-sidemenu {
        color: #8D8D8D;
        font-size: 30px;
        padding: 0;
    }

    .overlay-game-provider .gameProvider .list {
        display: grid;
        padding: 0;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .overlay-game-provider .gameProvider .box {
        display: inline-flex;
        align-items: center;
        background: #1e1e1e;
        font-size: 3vw;
        padding: 10px;
        flex-direction: column;
        border-radius: 16px;
        justify-content: space-between;
    }

    .overlay-game-provider .gameProvider .box.active {
        background: #FEB909;
    }

    .overlay-game-provider .gameProvider .box.active span {
        color: #000000;
        text-shadow: unset;
    }

    .overlay-game-provider .gameProvider .box .image {
        padding: unset;
        min-height: 50px;
        max-width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .overlay-game-provider .gameProvider .box:after {
        content: unset;
    }

    .overlay-game-provider .gameProvider .box span {
        position: unset;
        text-align: center;
        padding: unset;
        font-size: 3vw;
    }

    .overlay-game-provider .hot,
    .overlay-game-provider .new {
        position: absolute;
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
    }

    .promotion-list {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .promotion-list .box {
        overflow: hidden;
    }

    .promotion-list .box .image {
        transition: none;
    }

    .promotion-list .box:hover .image {
        transform: none;
    }

    /* Filter game buttons */
    .filter-game-container {
        display: block;
    }

    .search-bar-group {
        margin-bottom: 15px;
    }

    .filter-game-container .search_games::placeholder {
        color: #E0E0E0;
    }

    .filter-game-container .filter-game-buttons .filter-game-button {
        flex-basis: 100%;
        position: relative;
        justify-content: flex-start;
        color: #E0E0E0;
        border-radius: 8px;
    }

    .filter-game-container .filter-game-buttons .filter-game-button i {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform .3s ease-in-out;
    }

    .filter-game-container .filter-game-buttons .filter-game-button.sort-button.active i {
        transform: translateY(-50%) rotate(180deg);
    }

    .filter-game-container .dropdown-container {
        top: 112px;
    }

    .filter-game-container .sort-game-dropdown-container {
        width: 60%;
    }
}

@media only screen and (max-width: 500px) {
    .prov-label {
        width: 20px;
        height: 20px;
    }

    .prov-label.new {
        top: -3px;
    }

    .midbar-providers .provider-lists-body .game-holder {
        width: calc(100% / 3 - 9px);
    }

    .provider-list-category-item {
        height: auto;
        padding: 8px 12px;
    }

    .provider-list-category-item.active img,
    .provider-list-category-item:hover img {
        margin-right: 5px;
    }

    /* FOR PROVIDER SCROLL/EXPAND */
    .midbar-providers .provider-lists-body .game-holder {
        width: calc(100% / 3 - 9px);
    }
}

.midbar-providers .expand-control {
    animation: pulseExpand 2s ease infinite;
}

@keyframes bounceExapnd {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@keyframes pulseExpand {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}


.vpn-text {
    background: #1c00f5;
    font-weight: bolder;
    font-style: italic;
    position: absolute;
    padding: 5px 10px;
    left: 0px;
    top: -10px;
    border-radius: 5px;
    font-size: 10px;
    font-family: 'Montserrat';
}

.section-leaderboard {
    margin: 15px 0;
}

.section-leaderboard .prize-section .box {
    background: linear-gradient(to right, #532222 0%, #532222 50%);
    border-radius: 15px;
    white-space: nowrap;
    padding: 10px;
    text-align: initial;
    display: flex;
    gap: 8px;
    align-items: center;
}

.section-leaderboard .trophy {
    width: 100%;
}

.section-leaderboard .word {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}

.section-leaderboard .leaderboard-currency-text {
    font-size: 20px;
    font-weight: 600;
}

.section-leaderboard .btn-leaderboard {
    background: transparent;
    border: 3px solid #efb824;
    box-shadow: 0px 1px 4px 0px #e6c346;
    width: 100%;
    max-width: 125px;
    padding: 6px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
}

.btn-leaderboard a {
    color: #fff;
}

.liveChatBtn {
    background: linear-gradient(to right, #FABB1F 0%, #FF6200 100%);
    padding: 5px 20px;
    border-radius: 20px;
    text-align: center;
}

.section-contact .contact-us-container {
    background: #222753;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border-radius: 10px;
    max-height: 500px;
    overflow-y: auto;
    border-top: 20px solid #222753;
    border-bottom: 20px solid #222753;
}

.section-contact .contact-us-container::-webkit-scrollbar {
    display: none;
}

.section-contact .contact-us-item {
    display: flex;
    align-items: center;
    background: #414884;
    gap: 20px;
    padding: 20px;
    border-radius: 25px;
}

.section-contact .contact-us-item .image {
    width: 60px;
}

.section-contact .contact-us-item .contact-info .contact-type {
    margin-bottom: 5px;
}

.section-contact .contact-us-item .contact-info .contact-action a {
    color: #fff;
}

.section-contact .no-contact-container {
    background: #222753;
    padding: 20px;
    margin: auto;
    text-align: center;
    border-radius: 10px;
}

.section-contact .no-contact-icon {
    font-size: 70px;
    margin-bottom: 20px;
}

@media screen and (max-width: 700px) {
    .section-contact .contact-us-container {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 500px) {
    .section-general-info .new-content-holder {
        padding: 0 15px;
    }
}

.soccerGameContainer .list {
    white-space: nowrap;
    overflow-x: scroll;
}

.soccerGameContainer .list::-webkit-scrollbar {
    display: none;
}

.soccer-content {
    display: grid;
    text-align: center;
    align-items: center;
    background: #3A4174;
    padding: 20px;
    border-radius: 15px;
    gap: 20px;
    grid-template-columns: 80px 1fr 80px;
    min-height: 180px;
    justify-items: center;
}

.soccer-content-holder {
    display: inline-block;
    width: calc(400px - 8px);
    margin-right: 10px;
    white-space: normal;
    vertical-align: middle;
}

.soccer-team-img img {
    width: 100%;
    max-width: 80px;
    max-height: 80px;
    margin-bottom: 10px;
}

.soccer-team-name,
.soccer-match-details {
    font-size: clamp(10px, 2vw, 14px);
}

.soccer-match-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.match-time {
    background: #1E2664;
    padding: 5px 10px;
    border-radius: 20px;
}

.soccer-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.soccer-rules-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: 20px;
}

.soccer-rules-point {
    background: #5760A5;
    padding: 5px;
    border-radius: 10px;
}

.play-now-btn {
    display: inline-block;
    background: #B5304F;
    /* width: 50%; */
    margin-left: auto;
    margin-right: auto;
    max-width: 200px;
    padding: 5px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    cursor: pointer;
}

@media screen and (max-width: 500px) {
    .soccerGameContainer .list {
        gap: 10px;
    }

    .soccer-content-holder {
        width: 100%;
    }

    .soccer-content {
        padding: 15px;
        min-height: 150px;
    }
}

/* New UI */
/* Common Nav START */
.page-nav-container {
    margin: 25px 0;
    position: relative;
}

.layout-section {
    margin-bottom: 30px;
}

.page-nav-btn {
    background: #973535;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    text-transform: capitalize;
    display: block;
    color: #fff;
    position: relative;
    font-size: clamp(12px, 1.5vw, 14px);
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.page-nav-btn.page-nav-home-btn:hover,
.page-nav-btn.page-nav-home-btn:active,
.page-nav-btn.page-nav-home-btn:visited,
.page-nav-btn.page-nav-home-btn:focus {
    text-decoration: none;
    color: #fff;
}

.page-nav-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-nav-btn-dropdown-container {
    position: relative;
}

.page-nav-btn-container {
    position: relative;
}

.page-nav-btn-container .page-nav-btn i {
    /* position: absolute; */
    /* right: 5%; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    font-size: 14px;
}

.page-nav-btn-container .page-nav-btn.active i {
    transform: rotate(180deg);
}

.page-nav-dropdown {
    position: absolute;
    min-width: 150px;
    z-index: 4;
    background: #363E7B;
    color: #DBDBDB;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.page-nav-dropdown-select {
    padding: 10px 20px;
    cursor: pointer;
    text-transform: capitalize;
    display: block;
    color: #DBDBDB;
}

.page-nav-dropdown-select:hover {
    background: #414884;
    color: #DBDBDB;
}

.page-nav-btn.nav-page-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

@media only screen and (max-width: 800px) {
    .page-nav-wrapper {
        gap: 8px;
    }

    .page-nav-btn {
        padding: 10px 20px;
    }

    .page-nav-btn-container .page-nav-btn i {
        /* position: absolute; */
        /* right: 5%; */
        /* top: 50%; */
        /* transform: translateY(-50%); */
        font-size: 10px;
    }
}

 /* New UI */
                /* Common Nav START */
                .page-nav-container {
                    margin: 25px 0;
                    position: relative;
                  }
  
                  .layout-section {
                    margin-bottom: 30px;
                  }
  
                  .page-nav-btn {
                    background: #973535;
                    padding: 10px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #fff;
                    position: relative;
                    font-size: clamp(12px, 1.5vw, 14px);
                    display: inline-flex;
                    gap: 5px;
                    align-items: center;
                  }
  
                  .page-nav-btn.page-nav-home-btn:hover,
                  .page-nav-btn.page-nav-home-btn:active,
                  .page-nav-btn.page-nav-home-btn:visited,
                  .page-nav-btn.page-nav-home-btn:focus {
                    text-decoration: none;
                    color: #fff;
                  }
  
                  .page-nav-wrapper {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                  }
  
                  .page-nav-btn-dropdown-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container .page-nav-btn i {
                    /* position: absolute; */
                    /* right: 5%; */
                    /* top: 50%; */
                    /* transform: translateY(-50%); */
                    font-size: 14px;
                  }
  
                  .page-nav-btn-container .page-nav-btn.active i {
                    transform: rotate(180deg);
                  }
  
                  .page-nav-dropdown {
                    position: absolute;
                    min-width: 150px;
                    z-index: 4;
                    background: #363E7B;
                    color: #DBDBDB;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-top: 10px;
                  }
  
                  .page-nav-dropdown-select {
                    padding: 10px 20px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #DBDBDB;
                  }
  
                  .page-nav-dropdown-select:hover {
                    background: #414884;
                    color: #DBDBDB;
                  }
  
                  .page-nav-btn.nav-page-name {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                  }
  
                  @media only screen and (max-width: 800px) {
                    .page-nav-wrapper {
                      gap: 8px;
                    }
  
                    .page-nav-btn {
                      padding: 10px 20px;
                    }
  
                    .page-nav-btn-container .page-nav-btn i {
                      /* position: absolute; */
                      /* right: 5%; */
                      /* top: 50%; */
                      /* transform: translateY(-50%); */
                      font-size: 10px;
                    }
                  }
  
                  /* Common Nav END */


                  /* New UI */
                /* Common Nav START */
                .page-nav-container {
                    margin: 25px 0;
                    position: relative;
                  }
  
                  .layout-section {
                    margin-bottom: 30px;
                  }
  
                  .page-nav-btn {
                    background: #973535;
                    padding: 10px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #fff;
                    position: relative;
                    font-size: clamp(12px, 1.5vw, 14px);
                    display: inline-flex;
                    gap: 5px;
                    align-items: center;
                  }
  
                  .page-nav-btn.page-nav-home-btn:hover,
                  .page-nav-btn.page-nav-home-btn:active,
                  .page-nav-btn.page-nav-home-btn:visited,
                  .page-nav-btn.page-nav-home-btn:focus {
                    text-decoration: none;
                    color: #fff;
                  }
  
                  .page-nav-wrapper {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                  }
  
                  .page-nav-btn-dropdown-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container .page-nav-btn i {
                    /* position: absolute; */
                    /* right: 5%; */
                    /* top: 50%; */
                    /* transform: translateY(-50%); */
                    font-size: 14px;
                  }
  
                  .page-nav-btn-container .page-nav-btn.active i {
                    transform: rotate(180deg);
                  }
  
                  .page-nav-dropdown {
                    position: absolute;
                    min-width: 150px;
                    z-index: 4;
                    background: #363E7B;
                    color: #DBDBDB;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-top: 10px;
                  }
  
                  .page-nav-dropdown-select {
                    padding: 10px 20px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #DBDBDB;
                  }
  
                  .page-nav-dropdown-select:hover {
                    background: #414884;
                    color: #DBDBDB;
                  }
  
                  .page-nav-btn.nav-page-name {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                  }
  
                  @media only screen and (max-width: 800px) {
                    .page-nav-wrapper {
                      gap: 8px;
                    }
  
                    .page-nav-btn {
                      padding: 10px 20px;
                    }
  
                    .page-nav-btn-container .page-nav-btn i {
                      /* position: absolute; */
                      /* right: 5%; */
                      /* top: 50%; */
                      /* transform: translateY(-50%); */
                      font-size: 10px;
                    }
                  }
  
                  /* Common Nav END */

                  /* New UI */
                /* Common Nav START */
                .page-nav-container {
                    margin: 25px 0;
                    position: relative;
                  }
  
                  .layout-section {
                    margin-bottom: 30px;
                  }
  
                  .page-nav-btn {
                    background: #973535;
                    padding: 10px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #fff;
                    position: relative;
                    font-size: clamp(12px, 1.5vw, 14px);
                    display: inline-flex;
                    gap: 5px;
                    align-items: center;
                  }
  
                  .page-nav-btn.page-nav-home-btn:hover,
                  .page-nav-btn.page-nav-home-btn:active,
                  .page-nav-btn.page-nav-home-btn:visited,
                  .page-nav-btn.page-nav-home-btn:focus {
                    text-decoration: none;
                    color: #fff;
                  }
  
                  .page-nav-wrapper {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                  }
  
                  .page-nav-btn-dropdown-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container .page-nav-btn i {
                    /* position: absolute; */
                    /* right: 5%; */
                    /* top: 50%; */
                    /* transform: translateY(-50%); */
                    font-size: 14px;
                  }
  
                  .page-nav-btn-container .page-nav-btn.active i {
                    transform: rotate(180deg);
                  }
  
                  .page-nav-dropdown {
                    position: absolute;
                    min-width: 150px;
                    z-index: 4;
                    background: #363E7B;
                    color: #DBDBDB;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-top: 10px;
                  }
  
                  .page-nav-dropdown-select {
                    padding: 10px 20px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #DBDBDB;
                  }
  
                  .page-nav-dropdown-select:hover {
                    background: #414884;
                    color: #DBDBDB;
                  }
  
                  .page-nav-btn.nav-page-name {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                  }
  
                  @media only screen and (max-width: 800px) {
                    .page-nav-wrapper {
                      gap: 8px;
                    }
  
                    .page-nav-btn {
                      padding: 10px 20px;
                    }
  
                    .page-nav-btn-container .page-nav-btn i {
                      /* position: absolute; */
                      /* right: 5%; */
                      /* top: 50%; */
                      /* transform: translateY(-50%); */
                      font-size: 10px;
                    }
                  }
  
                  /* Common Nav END */

                   /* New UI */
                /* Common Nav START */
                .page-nav-container {
                    margin: 25px 0;
                    position: relative;
                  }
  
                  .layout-section {
                    margin-bottom: 30px;
                  }
  
                  .page-nav-btn {
                    background: #973535;
                    padding: 10px 15px;
                    border-radius: 5px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #fff;
                    position: relative;
                    font-size: clamp(12px, 1.5vw, 14px);
                    display: inline-flex;
                    gap: 5px;
                    align-items: center;
                  }
  
                  .page-nav-btn.page-nav-home-btn:hover,
                  .page-nav-btn.page-nav-home-btn:active,
                  .page-nav-btn.page-nav-home-btn:visited,
                  .page-nav-btn.page-nav-home-btn:focus {
                    text-decoration: none;
                    color: #fff;
                  }
  
                  .page-nav-wrapper {
                    display: flex;
                    gap: 10px;
                    align-items: center;
                  }
  
                  .page-nav-btn-dropdown-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container {
                    position: relative;
                  }
  
                  .page-nav-btn-container .page-nav-btn i {
                    /* position: absolute; */
                    /* right: 5%; */
                    /* top: 50%; */
                    /* transform: translateY(-50%); */
                    font-size: 14px;
                  }
  
                  .page-nav-btn-container .page-nav-btn.active i {
                    transform: rotate(180deg);
                  }
  
                  .page-nav-dropdown {
                    position: absolute;
                    min-width: 150px;
                    z-index: 4;
                    background: #363E7B;
                    color: #DBDBDB;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-top: 10px;
                  }
  
                  .page-nav-dropdown-select {
                    padding: 10px 20px;
                    cursor: pointer;
                    text-transform: capitalize;
                    display: block;
                    color: #DBDBDB;
                  }
  
                  .page-nav-dropdown-select:hover {
                    background: #414884;
                    color: #DBDBDB;
                  }
  
                  .page-nav-btn.nav-page-name {
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: block;
                  }
  
                  @media only screen and (max-width: 800px) {
                    .page-nav-wrapper {
                      gap: 8px;
                    }
  
                    .page-nav-btn {
                      padding: 10px 20px;
                    }
  
                    .page-nav-btn-container .page-nav-btn i {
                      /* position: absolute; */
                      /* right: 5%; */
                      /* top: 50%; */
                      /* transform: translateY(-50%); */
                      font-size: 10px;
                    }
                  }
  
                  /* Common Nav END */


                  /*FOOTER*/
            .section-footer-holder {
                background: #481b1b;
              }
  
              .section-footer-container {
                max-width: 1200px;
                width: 95%;
                margin: auto;
                display: flex;
                padding: 30px 0;
                overflow: hidden;
                align-items: flex-start;
                /*justify-content: center;*/
                gap: 15px;
                color: #E0E0E0;
              }
  
              .section-footer-container.footer-navigation {
                justify-content: center;
              }
  
              .section-footer-holder:nth-child(3) .section-footer-container {
                border-bottom: 1px solid #464646;
              }
  
              .footer-special {
                display: inline-flex;
                justify-items: center;
                align-items: center;
                flex-direction: column;
                gap: 5px;
                width: calc(100% / 4);
                text-align: center;
              }
  
              .footer-special h3 {
                color: #D824F6;
              }
  
              .footer-special img {
                max-width: 50px;
              }
  
              .section-footer-holder.special {
                background: #1c1720;
              }
  
              .section-footer-container.special .vertical-line {
                height: 100px;
              }
  
              .section-footer-link {
                display: inline-flex;
                gap: 20px;
                text-align: center;
              }
  
              .section-footer-container a {
                color: #E0E0E0;
              }
  
              .section-footer-container a:hover,
              .section-footer-container a.active {
                color: #fcb600;
                transition: .5s;
              }
  
              .mobfooterBox {
                display: flex;
                justify-content: center;
                background: #333333;
                padding: 10px 0;
                background: #1B2048;
                color: #E0E0E0;
              }
  
              /* NEW UI BRANCH FOOTER */
              .section-footer-container .footer-links-holder {
                display: flex;
                gap: 10%;
                width: 65%;
              }
  
              .section-footer-container .footer-links-holder .footer-details-list {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-column-gap: 40px;
                grid-row-gap: 15px;
              }
  
              .section-footer-container .footer-links-holder .link-list-items {
                display: flex;
                flex-direction: column;
                gap: 10px;
              }
  
              .section-footer-container .footer-image-holder {
                display: flex;
                width: 35%;
                justify-content: space-between;
              }
  
              .section-footer-middle {
                background: #390707;
              }
  
              .section-company-details {
                max-width: 1200px;
                width: 95%;
                margin: auto;
                padding: 30px 0;
                border-bottom: 1px solid #534195;
                color: #E0E0E0;
                text-align: center;
              }
  
              /* END NEW UI BRANCH FOOTER */
              .footer-details .footer-title {
                color: #efb824;
                text-transform: capitalize;
                margin-bottom: 15px;
                font-weight: 600;
              }
  
              .section-footer-provider {
                max-width: 1200px;
                width: 95%;
                margin: auto;
                display: flex;
                padding: 20px 0;
                overflow: hidden;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                text-align: center;
              }
  
              .section-footer-provider .icon img {
                display: flex;
                padding: 20px;
              }
  
              .footer-providers .icon {
                width: 100%;
                white-space: nowrap;
                overflow: scroll;
                scrollbar-width: none;
                -ms-overflow-style: none;
              }
  
              .footer-providers .icon::-webkit-scrollbar {
                display: none;
              }
  
  
              .section-footer-container .vertical-line {
                width: 0px;
                border-right: 1px solid #464646;
                margin-left: 15px;
                margin-right: 15px;
              }
  
              .footer-details .social-media {
                display: flex;
              }
  
              .footer-details .social-media img {
                min-width: 45px;
              }
  
              .footer-details .social-media img,
              .footer-details .certification-list img,
              .footer-details .paymentMethod img {
                display: inline-flex;
                padding: 5px;
                max-height: 45px;
              }
  
              .section-copyright {
                color: #E0E0E0;
                font-size: 12px;
                background: #481b1b;
              }
  
              .section-copyrightHolder {
                max-width: 1200px;
                width: 95%;
                margin: auto;
                padding: 20px 0;
                text-align: center;
              }
  
              .payment-methods-holder {
                display: flex;
                flex-direction: column;
                gap: 50px;
              }
  
              .payment-methods-holder>div:not(:only-child).d-dev {
                display: flex;
                justify-content: center;
                word-spacing: 2px;
              }
  
              .footer-cont a {
                text-decoration: underline;
              }
  
              @media screen and (max-width: 1200px) {
                .section-footer-container {
                  flex-direction: column;
                  gap: 30px;
                }
  
                .section-footer-container .footer-links-holder,
                .section-footer-container .footer-image-holder {
                  width: 100%;
                }
              }
  
              @media screen and (max-width: 800px) {
                .section-footer-container .footer-links-holder .footer-details-list {
                  grid-template-columns: 1fr;
                }
  
                .section-footer-container .footer-image-holder {
                  flex-direction: column;
                  gap: 30px;
                }
  
                .footer-cont {
                  margin-top: 15px;
                  word-spacing: 2px;
                }
              }

               /* APP download Modal Start */
    #appDownloadModal .modal-dialog {
        max-width: 1000px;
        text-align: left;
      }
  
      #appDownloadModal .modal-body {
        width: 100%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
      }
  
      #appDownloadModal .app-desc-title {
        margin-bottom: 35px;
      }
  
      /* Desc content Start */
      #appDownloadModal .app-desc-content {
        display: flex;
        justify-content: space-between;
        position: relative;
      }
  
      #appDownloadModal .app-desc-content .app-logo img {
        width: 125px;
        margin-bottom: 10px;
        filter: drop-shadow(0px 4px 4px #ededed);
      }
  
      #appDownloadModal .app-desc-content .app-background {
        position: absolute;
        left: 30%;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder {
        display: flex;
        gap: 20px;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder .app-download-item {
        border: 1px solid #ffffff33;
        border-radius: 5px;
        padding: 10px;
        width: 180px;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder {
        margin: 15px auto;
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder img {
        width: 125px;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder .download-qr {
        width: 100%;
        max-width: 100px;
        border: 2px solid #fff;
      }
  
      #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder .device-icon {
        width: 35px;
        /*position: absolute;*/
        /*right: -1%;*/
        /*top: 50%;*/
        /*transform: translateY(-50%);*/
  
      }
  
      /* OS icon color */
      #appDownloadModal .android-icon {
        fill: #00d909;
      }
  
      #appDownloadModal .ios-icon {
        fill: #2ab7fe;
      }
  
      /* Download button */
      #appDownloadModal .app-desc-content .app-download-holder .app-download-button {
        background-color: #b6b6b680;
        padding: 10px;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
        width: 125px;
      }
  
      /* APP Install Guide */
      #appDownloadModal .app-install-guide-holder {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 25px;
        padding-bottom: 15px;
      }
  
      #appDownloadModal .app-install-guide-holder .install-guide {
        display: flex;
        gap: 20px;
      }
  
      #appDownloadModal .app-install-guide-holder .install-guide .guide-img-holder {
        width: 15%;
        padding: 0 15px;
      }
  
      #appDownloadModal .app-install-guide-holder .install-guide .guide-desc-holder {
        width: 85%;
      }
  
      #appDownloadModal .app-install-guide-holder .install-guide .guide-desc-holder .guide-desc-title {
        margin-bottom: 15px;
      }
  
      .msg-content {
        word-wrap: break-word;
      }
  
      @media screen and (max-width: 800px) {
        #appDownloadModal .app-desc-content {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 25px;
        }
  
        #appDownloadModal .app-desc-content .app-logo {
          text-align: center;
        }
  
        #appDownloadModal .app-desc-content .app-background {
          display: none;
        }
  
        #appDownloadModal .app-install-guide-holder {
          padding-top: 15px;
          padding-bottom: 15px;
        }
  
        #appDownloadModal .app-install-guide-holder .install-guide .guide-img-holder {
          width: 30%;
          padding: 0 15px;
        }
  
        #appDownloadModal .app-install-guide-holder .install-guide .guide-desc-holder {
          width: 85%;
          font-size: clamp(12px, 1.5vw, 14px);
        }
  
  
      }
  
      @media screen and (max-width: 500px) {
        #appDownloadModal .app-desc-content .app-download-holder .app-download-item {
          width: 150px;
        }
  
        #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder .download-qr {
          max-width: 80px;
        }
  
        #appDownloadModal .app-desc-content .app-download-holder .qr-image-holder .device-icon {
          width: 20px;
        }
      }
  
      /* APP download Modal End */
  
      .pointer-events-none {
          pointer-events: none
      }

      .visible {
          visibility: visible
      }

      .invisible {
          visibility: hidden
      }

      .collapse {
          visibility: collapse
      }

      .static {
          position: static
      }

      .fixed {
          position: fixed
      }

      .\!absolute {
          position: absolute!important
      }

      .absolute {
          position: absolute
      }

      .relative {
          position: relative
      }

      .sticky {
          position: sticky
      }

      .\!bottom-\[100px\] {
          bottom: 100px!important
      }

      .\!bottom-\[135px\] {
          bottom: 135px!important
      }

      .\!bottom-\[unset\] {
          bottom: unset!important
      }

      .\!right-6 {
          right: 1.5rem!important
      }

      .-bottom-9 {
          bottom: -2.25rem
      }

      .-left-7 {
          left: -1.75rem
      }

      .-right-5 {
          right: -1.25rem
      }

      .-top-10 {
          top: -2.5rem
      }

      .bottom-0 {
          bottom: 0
      }

      .bottom-14 {
          bottom: 3.5rem
      }

      .bottom-2 {
          bottom: .5rem
      }

      .bottom-5 {
          bottom: 1.25rem
      }

      .bottom-6 {
          bottom: 1.5rem
      }

      .bottom-\[-40px\] {
          bottom: -40px
      }

      .left-0 {
          left: 0
      }

      .left-1\/2 {
          left: 50%
      }

      .left-20 {
          left: 5rem
      }

      .left-3 {
          left: .75rem
      }

      .left-4 {
          left: 1rem
      }

      .left-5 {
          left: 1.25rem
      }

      .left-\[15px\] {
          left: 15px
      }

      .right-0 {
          right: 0
      }

      .right-2 {
          right: .5rem
      }

      .right-3 {
          right: .75rem
      }

      .right-4 {
          right: 1rem
      }

      .right-5 {
          right: 1.25rem
      }

      .right-\[-38px\] {
          right: -38px
      }

      .right-\[10px\] {
          right: 10px
      }

      .right-\[20px\] {
          right: 20px
      }

      .right-\[6px\] {
          right: 6px
      }

      .top-0 {
          top: 0
      }

      .top-1\/2 {
          top: 50%
      }

      .top-3 {
          top: .75rem
      }

      .top-4 {
          top: 1rem
      }

      .top-5 {
          top: 1.25rem
      }

      .top-\[-5px\] {
          top: -5px
      }

      .top-\[15px\] {
          top: 15px
      }

      .top-\[20\%\] {
          top: 20%
      }

      .top-\[22px\] {
          top: 22px
      }

      .top-\[250px\] {
          top: 250px
      }

      .top-\[30\%\] {
          top: 30%
      }

      .top-\[30px\] {
          top: 30px
      }

      .top-\[50\%\] {
          top: 50%
      }

      .top-\[6px\] {
          top: 6px
      }

      .z-10 {
          z-index: 10
      }

      .z-50 {
          z-index: 50
      }

      .z-\[10\] {
          z-index: 10
      }

      .z-\[1\] {
          z-index: 1
      }

      .z-\[2\] {
          z-index: 2
      }

      .z-\[51\] {
          z-index: 51
      }

      .order-1 {
          order: 1
      }

      .order-2 {
          order: 2
      }

      .order-3 {
          order: 3
      }

      .order-4 {
          order: 4
      }

      .order-5 {
          order: 5
      }

      .col-span-1 {
          grid-column: span 1/span 1
      }

      .col-span-10 {
          grid-column: span 10/span 10
      }

      .col-span-2 {
          grid-column: span 2/span 2
      }

      .col-span-3 {
          grid-column: span 3/span 3
      }

      .col-span-5 {
          grid-column: span 5/span 5
      }

      .col-span-8 {
          grid-column: span 8/span 8
      }

      .m-2 {
          margin: .5rem
      }

      .-mx-4 {
          margin-left: -1rem;
          margin-right: -1rem
      }

      .mx-1 {
          margin-left: .25rem;
          margin-right: .25rem
      }

      .mx-2 {
          margin-left: .5rem;
          margin-right: .5rem
      }

      .mx-\[10px\] {
          margin-left: 10px;
          margin-right: 10px
      }

      .mx-auto {
          margin-left: auto;
          margin-right: auto
      }

      .my-2 {
          margin-bottom: .5rem;
          margin-top: .5rem
      }

      .my-3 {
          margin-bottom: .75rem;
          margin-top: .75rem
      }

      .my-4 {
          margin-bottom: 1rem;
          margin-top: 1rem
      }

      .my-5 {
          margin-bottom: 1.25rem;
          margin-top: 1.25rem
      }

      .my-6 {
          margin-bottom: 1.5rem;
          margin-top: 1.5rem
      }

      .my-\[10px\] {
          margin-bottom: 10px;
          margin-top: 10px
      }

      .\!-mt-\[40px\] {
          margin-top: -40px!important
      }

      .\!mt-4 {
          margin-top: 1rem!important
      }

      .-mt-4 {
          margin-top: -1rem
      }

      .-mt-6 {
          margin-top: -1.5rem
      }

      .mb-1 {
          margin-bottom: .25rem
      }

      .mb-10 {
          margin-bottom: 2.5rem
      }

      .mb-2 {
          margin-bottom: .5rem
      }

      .mb-20 {
          margin-bottom: 5rem
      }

      .mb-3 {
          margin-bottom: .75rem
      }

      .mb-4 {
          margin-bottom: 1rem
      }

      .mb-5 {
          margin-bottom: 1.25rem
      }

      .mb-6 {
          margin-bottom: 1.5rem
      }

      .mb-8 {
          margin-bottom: 2rem
      }

      .mb-\[10px\] {
          margin-bottom: 10px
      }

      .me-2 {
          margin-inline-end:.5rem}

      .ml-1 {
          margin-left: .25rem
      }

      .ml-2 {
          margin-left: .5rem
      }

      .ml-3 {
          margin-left: .75rem
      }

      .ml-\[10px\] {
          margin-left: 10px
      }

      .ml-\[15px\] {
          margin-left: 15px
      }

      .mr-1 {
          margin-right: .25rem
      }

      .mr-2 {
          margin-right: .5rem
      }

      .mr-3 {
          margin-right: .75rem
      }

      .mr-5 {
          margin-right: 1.25rem
      }

      .mr-7 {
          margin-right: 1.75rem
      }

      .mr-\[10px\] {
          margin-right: 10px
      }

      .mr-\[5px\] {
          margin-right: 5px
      }

      .mt-0 {
          margin-top: 0
      }

      .mt-1 {
          margin-top: .25rem
      }

      .mt-10 {
          margin-top: 2.5rem
      }

      .mt-12 {
          margin-top: 3rem
      }

      .mt-2 {
          margin-top: .5rem
      }

      .mt-20 {
          margin-top: 5rem
      }

      .mt-3 {
          margin-top: .75rem
      }

      .mt-4 {
          margin-top: 1rem
      }

      .mt-5 {
          margin-top: 1.25rem
      }

      .mt-6 {
          margin-top: 1.5rem
      }

      .mt-8 {
          margin-top: 2rem
      }

      .mt-\[10px\] {
          margin-top: 10px
      }

      .mt-\[15px\] {
          margin-top: 15px
      }

      .mt-\[20px\] {
          margin-top: 20px
      }

      .mt-\[24px\] {
          margin-top: 24px
      }

      .mt-\[40px\] {
          margin-top: 40px
      }

      .mt-\[5px\] {
          margin-top: 5px
      }

      .mt-\[8px\] {
          margin-top: 8px
      }

      .\!block {
          display: block!important
      }

      .block {
          display: block
      }

      .\!inline-block {
          display: inline-block!important
      }

      .inline-block {
          display: inline-block
      }

      .inline {
          display: inline
      }

      .\!flex {
          display: flex!important
      }

      .flex {
          display: flex
      }

      .\!inline-flex {
          display: inline-flex!important
      }

      .inline-flex {
          display: inline-flex
      }

      .table {
          display: table
      }

      .grid {
          display: grid
      }

      .\!hidden {
          display: none!important
      }

      .hidden {
          display: none
      }

      .aspect-square {
          aspect-ratio: 1/1
      }

      .h-10 {
          height: 2.5rem
      }

      .h-2 {
          height: .5rem
      }

      .h-28 {
          height: 7rem
      }

      .h-3 {
          height: .75rem
      }

      .h-32 {
          height: 8rem
      }

      .h-4 {
          height: 1rem
      }

      .h-5 {
          height: 1.25rem
      }

      .h-6 {
          height: 1.5rem
      }

      .h-7 {
          height: 1.75rem
      }

      .h-8 {
          height: 2rem
      }

      .h-\[100px\] {
          height: 100px
      }

      .h-\[120px\] {
          height: 120px
      }

      .h-\[14px\] {
          height: 14px
      }

      .h-\[200px\] {
          height: 200px
      }

      .h-\[20px\] {
          height: 20px
      }

      .h-\[212px\] {
          height: 212px
      }

      .h-\[21px\] {
          height: 21px
      }

      .h-\[24px\] {
          height: 24px
      }

      .h-\[25px\] {
          height: 25px
      }

      .h-\[268px\] {
          height: 268px
      }

      .h-\[28px\] {
          height: 28px
      }

      .h-\[30px\] {
          height: 30px
      }

      .h-\[31px\] {
          height: 31px
      }

      .h-\[32px\] {
          height: 32px
      }

      .h-\[33px\] {
          height: 33px
      }

      .h-\[34px\] {
          height: 34px
      }

      .h-\[35px\] {
          height: 35px
      }

      .h-\[3px\] {
          height: 3px
      }

      .h-\[400px\] {
          height: 400px
      }

      .h-\[40px\] {
          height: 40px
      }

      .h-\[43px\] {
          height: 43px
      }

      .h-\[45px\] {
          height: 45px
      }

      .h-\[50px\] {
          height: 50px
      }

      .h-\[55px\] {
          height: 55px
      }

      .h-\[59px\] {
          height: 59px
      }

      .h-\[5px\] {
          height: 5px
      }

      .h-\[60px\] {
          height: 60px
      }

      .h-\[65px\] {
          height: 65px
      }

      .h-\[70px\] {
          height: 70px
      }

      .h-\[74px\] {
          height: 74px
      }

      .h-\[7px\] {
          height: 7px
      }

      .h-\[80px\] {
          height: 80px
      }

      .h-\[88px\] {
          height: 88px
      }

      .h-\[var\(--window-height\)\] {
          height: var(--window-height)
      }

      .h-full {
          height: 100%
      }

      .\!max-h-\[50vh\] {
          max-height: 50vh!important
      }

      .max-h-0 {
          max-height: 0
      }

      .max-h-8 {
          max-height: 2rem
      }

      .max-h-\[20\%\] {
          max-height: 20%
      }

      .max-h-\[200px\] {
          max-height: 200px
      }

      .max-h-\[500px\] {
          max-height: 500px
      }

      .max-h-\[76px\] {
          max-height: 76px
      }

      .\!min-h-0 {
          min-height: 0!important
      }

      .min-h-0 {
          min-height: 0
      }

      .min-h-\[28px\] {
          min-height: 28px
      }

      .min-h-\[50px\] {
          min-height: 50px
      }

      .min-h-\[var\(--window-height\)\] {
          min-height: var(--window-height)
      }

      .min-h-screen {
          min-height: 100vh
      }

      .\!w-\[250px\] {
          width: 250px!important
      }

      .\!w-auto {
          width: auto!important
      }

      .w-1\/2 {
          width: 50%
      }

      .w-1\/3 {
          width: 33.333333%
      }

      .w-1\/4 {
          width: 25%
      }

      .w-10 {
          width: 2.5rem
      }

      .w-10\/12 {
          width: 83.333333%
      }

      .w-11\/12 {
          width: 91.666667%
      }

      .w-12 {
          width: 3rem
      }

      .w-14 {
          width: 3.5rem
      }

      .w-16 {
          width: 4rem
      }

      .w-2 {
          width: .5rem
      }

      .w-24 {
          width: 6rem
      }

      .w-3 {
          width: .75rem
      }

      .w-32 {
          width: 8rem
      }

      .w-4 {
          width: 1rem
      }

      .w-5 {
          width: 1.25rem
      }

      .w-6 {
          width: 1.5rem
      }

      .w-7 {
          width: 1.75rem
      }

      .w-8 {
          width: 2rem
      }

      .w-8\/12 {
          width: 66.666667%
      }

      .w-\[100px\] {
          width: 100px
      }

      .w-\[100vw\] {
          width: 100vw
      }

      .w-\[110px\] {
          width: 110px
      }

      .w-\[14px\] {
          width: 14px
      }

      .w-\[15px\] {
          width: 15px
      }

      .w-\[17px\] {
          width: 17px
      }

      .w-\[180px\] {
          width: 180px
      }

      .w-\[18px\] {
          width: 18px
      }

      .w-\[1px\] {
          width: 1px
      }

      .w-\[200px\] {
          width: 200px
      }

      .w-\[20px\] {
          width: 20px
      }

      .w-\[22px\] {
          width: 22px
      }

      .w-\[250px\] {
          width: 250px
      }

      .w-\[25px\] {
          width: 25px
      }

      .w-\[28px\] {
          width: 28px
      }

      .w-\[30\%\] {
          width: 30%
      }

      .w-\[300px\] {
          width: 300px
      }

      .w-\[30px\] {
          width: 30px
      }

      .w-\[32px\] {
          width: 32px
      }

      .w-\[35px\] {
          width: 35px
      }

      .w-\[40px\] {
          width: 40px
      }

      .w-\[45px\] {
          width: 45px
      }

      .w-\[50px\] {
          width: 50px
      }

      .w-\[560px\] {
          width: 560px
      }

      .w-\[59px\] {
          width: 59px
      }

      .w-\[600px\] {
          width: 600px
      }

      .w-\[60px\] {
          width: 60px
      }

      .w-\[65px\] {
          width: 65px
      }

      .w-\[70\%\] {
          width: 70%
      }

      .w-\[70px\] {
          width: 70px
      }

      .w-\[7px\] {
          width: 7px
      }

      .w-\[80px\] {
          width: 80px
      }

      .w-\[88px\] {
          width: 88px
      }

      .w-fit {
          width: -moz-fit-content;
          width: fit-content
      }

      .w-full {
          width: 100%
      }

      .min-w-\[160px\] {
          min-width: 160px
      }

      .min-w-\[170px\] {
          min-width: 170px
      }

      .min-w-\[280px\] {
          min-width: 280px
      }

      .min-w-\[28px\] {
          min-width: 28px
      }

      .min-w-\[70px\] {
          min-width: 70px
      }

      .min-w-\[90px\] {
          min-width: 90px
      }

      .min-w-\[92px\] {
          min-width: 92px
      }

      .\!max-w-\[120px\] {
          max-width: 120px!important
      }

      .\!max-w-\[200px\] {
          max-width: 200px!important
      }

      .max-w-\[150px\] {
          max-width: 150px
      }

      .max-w-\[160px\] {
          max-width: 160px
      }

      .max-w-\[180px\] {
          max-width: 180px
      }

      .max-w-\[200px\] {
          max-width: 200px
      }

      .max-w-\[240px\] {
          max-width: 240px
      }

      .max-w-\[250px\] {
          max-width: 250px
      }

      .max-w-\[300px\] {
          max-width: 300px
      }

      .max-w-\[350px\] {
          max-width: 350px
      }

      .max-w-\[360px\] {
          max-width: 360px
      }

      .max-w-\[500px\] {
          max-width: 500px
      }

      .max-w-\[550px\] {
          max-width: 550px
      }

      .max-w-\[59\%\] {
          max-width: 59%
      }

      .max-w-\[800px\] {
          max-width: 800px
      }

      .max-w-\[916px\] {
          max-width: 916px
      }

      .max-w-full {
          max-width: 100%
      }

      .max-w-none {
          max-width: none
      }

      .flex-shrink {
          flex-shrink: 1
      }

      .flex-shrink-0 {
          flex-shrink: 0
      }

      .shrink {
          flex-shrink: 1
      }

      .shrink-0 {
          flex-shrink: 0
      }

      .flex-grow,.grow {
          flex-grow: 1
      }

      .border-collapse {
          border-collapse: collapse
      }

      .-translate-x-1\/2 {
          --tw-translate-x: -50%
      }

      .-translate-x-1\/2,.-translate-y-1\/2 {
          transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .-translate-y-1\/2 {
          --tw-translate-y: -50%
      }

      .-rotate-12 {
          --tw-rotate: -12deg
      }

      .-rotate-12,.rotate-180 {
          transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .rotate-180 {
          --tw-rotate: 180deg
      }

      .transform {
          transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
      }

      .\!cursor-default {
          cursor: default!important
      }

      .cursor-default {
          cursor: default
      }

      .cursor-pointer {
          cursor: pointer
      }

      .select-none {
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none
      }

      .resize {
          resize: both
      }

      .list-decimal {
          list-style-type: decimal
      }

      .grid-cols-1 {
          grid-template-columns: repeat(1,minmax(0,1fr))
      }

      .grid-cols-10 {
          grid-template-columns: repeat(10,minmax(0,1fr))
      }

      .grid-cols-2 {
          grid-template-columns: repeat(2,minmax(0,1fr))
      }

      .grid-cols-3 {
          grid-template-columns: repeat(3,minmax(0,1fr))
      }

      .grid-cols-4 {
          grid-template-columns: repeat(4,minmax(0,1fr))
      }

      .grid-cols-5 {
          grid-template-columns: repeat(5,minmax(0,1fr))
      }

      .grid-cols-6 {
          grid-template-columns: repeat(6,minmax(0,1fr))
      }

      .flex-row {
          flex-direction: row
      }

      .flex-col {
          flex-direction: column
      }

      .flex-wrap {
          flex-wrap: wrap
      }

      .flex-nowrap {
          flex-wrap: nowrap
      }

      .place-content-center {
          place-content: center
      }

      .items-start {
          align-items: flex-start
      }

      .items-end {
          align-items: flex-end
      }

      .items-center {
          align-items: center
      }

      .items-stretch {
          align-items: stretch
      }

      .\!justify-start {
          justify-content: flex-start!important
      }

      .justify-start {
          justify-content: flex-start
      }

      .justify-end {
          justify-content: flex-end
      }

      .justify-center {
          justify-content: center
      }

      .justify-between {
          justify-content: space-between
      }

      .gap-1 {
          gap: .25rem
      }

      .gap-10 {
          gap: 2.5rem
      }

      .gap-2 {
          gap: .5rem
      }

      .gap-3 {
          gap: .75rem
      }

      .gap-4 {
          gap: 1rem
      }

      .gap-5 {
          gap: 1.25rem
      }

      .gap-6 {
          gap: 1.5rem
      }

      .gap-8 {
          gap: 2rem
      }

      .gap-\[10px\] {
          gap: 10px
      }

      .gap-\[20px\] {
          gap: 20px
      }

      .gap-\[2px\] {
          gap: 2px
      }

      .gap-\[50px\] {
          gap: 50px
      }

      .gap-\[6px\] {
          gap: 6px
      }

      .gap-x-1 {
          -moz-column-gap: .25rem;
          column-gap: .25rem
      }

      .gap-x-2 {
          -moz-column-gap: .5rem;
          column-gap: .5rem
      }

      .gap-x-3 {
          -moz-column-gap: .75rem;
          column-gap: .75rem
      }

      .gap-x-4 {
          -moz-column-gap: 1rem;
          column-gap: 1rem
      }

      .gap-y-3 {
          row-gap: .75rem
      }

      .gap-y-4 {
          row-gap: 1rem
      }

      .self-center {
          align-self: center
      }

      .justify-self-end {
          justify-self: end
      }

      .overflow-auto {
          overflow: auto
      }

      .overflow-hidden {
          overflow: hidden
      }

      .overflow-x-auto {
          overflow-x: auto
      }

      .overflow-y-auto {
          overflow-y: auto
      }

      .overflow-x-hidden {
          overflow-x: hidden
      }

      .scroll-smooth {
          scroll-behavior: smooth
      }

      .truncate {
          overflow: hidden;
          white-space: nowrap
      }

      .text-ellipsis,.truncate {
          text-overflow: ellipsis
      }

      .whitespace-nowrap {
          white-space: nowrap
      }

      .break-words {
          overflow-wrap: break-word
      }

      .break-all {
          word-break: break-all
      }

      .\!rounded-\[10px\] {
          border-radius: 10px!important
      }

      .\!rounded-\[22px\] {
          border-radius: 22px!important
      }

      .\!rounded-\[4rem\] {
          border-radius: 4rem!important
      }

      .\!rounded-\[5px\] {
          border-radius: 5px!important
      }

      .\!rounded-lg {
          border-radius: .5rem!important
      }

      .\!rounded-none {
          border-radius: 0!important
      }

      .rounded {
          border-radius: .25rem
      }

      .rounded-2xl {
          border-radius: 1rem
      }

      .rounded-3xl {
          border-radius: 1.5rem
      }

      .rounded-\[10px\] {
          border-radius: 10px
      }

      .rounded-\[15px\] {
          border-radius: 15px
      }

      .rounded-\[20px\] {
          border-radius: 20px
      }

      .rounded-\[23px\] {
          border-radius: 23px
      }

      .rounded-\[4px\] {
          border-radius: 4px
      }

      .rounded-\[50\%\] {
          border-radius: 50%
      }

      .rounded-\[50px\] {
          border-radius: 50px
      }

      .rounded-\[5px\] {
          border-radius: 5px
      }

      .rounded-\[8px\] {
          border-radius: 8px
      }

      .rounded-full {
          border-radius: 9999px
      }

      .rounded-lg {
          border-radius: .5rem
      }

      .rounded-md {
          border-radius: .375rem
      }

      .rounded-none {
          border-radius: 0
      }

      .rounded-xl {
          border-radius: .75rem
      }

      .rounded-b-2xl {
          border-bottom-left-radius: 1rem;
          border-bottom-right-radius: 1rem
      }

      .rounded-b-md {
          border-bottom-left-radius: .375rem;
          border-bottom-right-radius: .375rem
      }

      .rounded-b-none {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0
      }

      .rounded-b-xl {
          border-bottom-left-radius: .75rem;
          border-bottom-right-radius: .75rem
      }

      .rounded-t-2xl {
          border-top-left-radius: 1rem;
          border-top-right-radius: 1rem
      }

      .border {
          border-width: 1px
      }

      .border-2 {
          border-width: 2px
      }

      .border-\[1px\] {
          border-width: 1px
      }

      .border-\[3px\] {
          border-width: 3px
      }

      .border-b {
          border-bottom-width: 1px
      }

      .border-l {
          border-left-width: 1px
      }

      .border-r {
          border-right-width: 1px
      }

      .border-t-0 {
          border-top-width: 0
      }

      .\!border-none {
          border-style: none!important
      }

      .border-none {
          border-style: none
      }

      .border-\[\#46AD4D\] {
          --tw-border-opacity: 1;
          border-color: rgb(70 173 77/var(--tw-border-opacity))
      }

      .border-\[\#6B696C\] {
          --tw-border-opacity: 1;
          border-color: rgb(107 105 108/var(--tw-border-opacity))
      }

      .border-\[\#919191\] {
          --tw-border-opacity: 1;
          border-color: rgb(145 145 145/var(--tw-border-opacity))
      }

      .border-\[\#fff\] {
          --tw-border-opacity: 1;
          border-color: rgb(255 255 255/var(--tw-border-opacity))
      }

      .border-\[var\(--primary\)\] {
          border-color: var(--primary)
      }

      .border-line {
          border-color: var(--line)
      }

      .border-primary {
          border-color: var(--primary)
      }

      .border-text-base {
          border-color: var(--text-base)
      }

      .border-white {
          --tw-border-opacity: 1;
          border-color: rgb(255 255 255/var(--tw-border-opacity))
      }

      .border-y-line {
          border-top-color: var(--line)
      }

      .border-b-line,.border-y-line {
          border-bottom-color: var(--line)
      }

      .\!bg-\[\#272727\] {
          --tw-bg-opacity: 1!important;
          background-color: rgb(39 39 39/var(--tw-bg-opacity))!important
      }

      .\!bg-\[\#363E7B\] {
          --tw-bg-opacity: 1!important;
          background-color: rgb(54 62 123/var(--tw-bg-opacity))!important
      }

      .\!bg-\[\#46AD4D\] {
          --tw-bg-opacity: 1!important;
          background-color: rgb(70 173 77/var(--tw-bg-opacity))!important
      }

      .\!bg-content-light {
          background-color: var(--content-light)!important
      }

      .\!bg-transparent {
          background-color: transparent!important
      }

      .\!bg-white {
          --tw-bg-opacity: 1!important;
          background-color: rgb(255 255 255/var(--tw-bg-opacity))!important
      }

      .bg-\[\#0093FF\] {
          --tw-bg-opacity: 1;
          background-color: rgb(0 147 255/var(--tw-bg-opacity))
      }

      .bg-\[\#00D600\] {
          --tw-bg-opacity: 1;
          background-color: rgb(0 214 0/var(--tw-bg-opacity))
      }

      .bg-\[\#060C38\] {
          --tw-bg-opacity: 1;
          background-color: rgb(6 12 56/var(--tw-bg-opacity))
      }

      .bg-\[\#080808\] {
          --tw-bg-opacity: 1;
          background-color: rgb(8 8 8/var(--tw-bg-opacity))
      }

      .bg-\[\#0E0E0F\] {
          --tw-bg-opacity: 1;
          background-color: rgb(14 14 15/var(--tw-bg-opacity))
      }

      .bg-\[\#222753\] {
          --tw-bg-opacity: 1;
          background-color: rgb(34 39 83/var(--tw-bg-opacity))
      }

      .bg-\[\#272727\] {
          --tw-bg-opacity: 1;
          background-color: rgb(39 39 39/var(--tw-bg-opacity))
      }

      .bg-\[\#363E7B\] {
          --tw-bg-opacity: 1;
          background-color: rgb(54 62 123/var(--tw-bg-opacity))
      }

      .bg-\[\#383F76\] {
          --tw-bg-opacity: 1;
          background-color: rgb(56 63 118/var(--tw-bg-opacity))
      }

      .bg-\[\#3ECA00\] {
          --tw-bg-opacity: 1;
          background-color: rgb(62 202 0/var(--tw-bg-opacity))
      }

      .bg-\[\#414884\] {
          --tw-bg-opacity: 1;
          background-color: rgb(65 72 132/var(--tw-bg-opacity))
      }

      .bg-\[\#47494B\] {
          --tw-bg-opacity: 1;
          background-color: rgb(71 73 75/var(--tw-bg-opacity))
      }

      .bg-\[\#492D53\] {
          --tw-bg-opacity: 1;
          background-color: rgb(73 45 83/var(--tw-bg-opacity))
      }

      .bg-\[\#C3C3C3\] {
          --tw-bg-opacity: 1;
          background-color: rgb(195 195 195/var(--tw-bg-opacity))
      }

      .bg-\[\#DBDBDB\] {
          --tw-bg-opacity: 1;
          background-color: rgb(219 219 219/var(--tw-bg-opacity))
      }

      .bg-\[\#F40B0B\] {
          --tw-bg-opacity: 1;
          background-color: rgb(244 11 11/var(--tw-bg-opacity))
      }

      .bg-\[\#F9BB1F\] {
          --tw-bg-opacity: 1;
          background-color: rgb(249 187 31/var(--tw-bg-opacity))
      }

      .bg-\[\#FAFAFC\] {
          --tw-bg-opacity: 1;
          background-color: rgb(250 250 252/var(--tw-bg-opacity))
      }

      .bg-\[\#FF0000\] {
          --tw-bg-opacity: 1;
          background-color: rgb(255 0 0/var(--tw-bg-opacity))
      }

      .bg-\[\#FF0B0B\] {
          --tw-bg-opacity: 1;
          background-color: rgb(255 11 11/var(--tw-bg-opacity))
      }

      .bg-\[\#FF4F29\] {
          --tw-bg-opacity: 1;
          background-color: rgb(255 79 41/var(--tw-bg-opacity))
      }

      .bg-\[rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
          background-color: rgba(0,0,0,.5)
      }

      .bg-\[var\(--game-container-bg\)\] {
          background-color: var(--game-container-bg)
      }

      .bg-\[var\(--game-menu-bg\)\] {
          background-color: var(--game-menu-bg)
      }

      .bg-\[var\(--game-search-input-color\)\] {
          background-color: var(--game-search-input-color)
      }

      .bg-\[var\(--game-tab-menu-bg\)\] {
          background-color: var(--game-tab-menu-bg)
      }

      .bg-\[var\(--header-bg\)\] {
          background-color: var(--header-bg)
      }

      .bg-\[var\(--marquee-bg\)\] {
          background-color: var(--marquee-bg)
      }

      .bg-\[var\(--ms-diary-bg\)\] {
          background-color: var(--ms-diary-bg)
      }

      .bg-\[var\(--sidebar-btn-arrow-bg\)\] {
          background-color: var(--sidebar-btn-arrow-bg)
      }

      .bg-\[var\(--sidepanel-bg\)\] {
          background-color: var(--sidepanel-bg)
      }

      .bg-black {
          --tw-bg-opacity: 1;
          background-color: rgb(0 0 0/var(--tw-bg-opacity))
      }

      .bg-body {
          background-color: var(--body)
      }

      .bg-content {
          background-color: var(--content)
      }

      .bg-content-dark {
          background-color: var(--content-dark)
      }

      .bg-content-light-2 {
          background-color: var(--content-light-2)
      }

      .bg-current {
          background-color: currentColor
      }

      .bg-primary {
          background-color: var(--primary)
      }

      .bg-primary-light {
          background-color: var(--primary-light)
      }

      .bg-secondary {
          background-color: var(--secondary)
      }

      .bg-text-base {
          background-color: var(--text-base)
      }

      .bg-transparent {
          background-color: transparent
      }

      .bg-white {
          --tw-bg-opacity: 1;
          background-color: rgb(255 255 255/var(--tw-bg-opacity))
      }

      .bg-opacity-60 {
          --tw-bg-opacity: 0.6
      }

      .bg-cover {
          background-size: cover
      }

      .bg-center {
          background-position: 50%
      }

      .bg-no-repeat {
          background-repeat: no-repeat
      }

      .fill-\[\#fff\] {
          fill: #fff
      }

      .fill-\[var\(--game-search-icon-color\)\] {
          fill: var(--game-search-icon-color)
      }

      .fill-\[var\(--text-lighter\)\] {
          fill: var(--text-lighter)
      }

      .fill-white {
          fill: #fff
      }

      .object-contain {
          -o-object-fit: contain;
          object-fit: contain
      }

      .\!p-0 {
          padding: 0!important
      }

      .\!p-4 {
          padding: 1rem!important
      }

      .p-0 {
          padding: 0
      }

      .p-1 {
          padding: .25rem
      }

      .p-2 {
          padding: .5rem
      }

      .p-3 {
          padding: .75rem
      }

      .p-4 {
          padding: 1rem
      }

      .p-5 {
          padding: 1.25rem
      }

      .p-6 {
          padding: 1.5rem
      }

      .p-\[10px\] {
          padding: 10px
      }

      .p-\[20px\] {
          padding: 20px
      }

      .p-\[5px\] {
          padding: 5px
      }

      .p-\[6px\] {
          padding: 6px
      }

      .\!px-0 {
          padding-left: 0!important;
          padding-right: 0!important
      }

      .\!px-4 {
          padding-left: 1rem!important;
          padding-right: 1rem!important
      }

      .\!py-2 {
          padding-bottom: .5rem!important;
          padding-top: .5rem!important
      }

      .\!py-3 {
          padding-bottom: .75rem!important;
          padding-top: .75rem!important
      }

      .\!py-4 {
          padding-bottom: 1rem!important;
          padding-top: 1rem!important
      }

      .\!py-5 {
          padding-bottom: 1.25rem!important;
          padding-top: 1.25rem!important
      }

      .\!py-\[10px\] {
          padding-bottom: 10px!important;
          padding-top: 10px!important
      }

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

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

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

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

      .px-5 {
          padding-left: 1.25rem;
          padding-right: 1.25rem
      }

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

      .px-\[10px\] {
          padding-left: 10px;
          padding-right: 10px
      }

      .px-\[15px\] {
          padding-left: 15px;
          padding-right: 15px
      }

      .px-\[20px\] {
          padding-left: 20px;
          padding-right: 20px
      }

      .px-\[26px\] {
          padding-left: 26px;
          padding-right: 26px
      }

      .px-\[5px\] {
          padding-left: 5px;
          padding-right: 5px
      }

      .py-0 {
          padding-bottom: 0;
          padding-top: 0
      }

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

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

      .py-3 {
          padding-bottom: .75rem;
          padding-top: .75rem
      }

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

      .py-5 {
          padding-bottom: 1.25rem;
          padding-top: 1.25rem
      }

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

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

      .py-\[10px\] {
          padding-bottom: 10px;
          padding-top: 10px
      }

      .py-\[15px\] {
          padding-bottom: 15px;
          padding-top: 15px
      }

      .py-\[30px\] {
          padding-bottom: 30px;
          padding-top: 30px
      }

      .py-\[5px\] {
          padding-bottom: 5px;
          padding-top: 5px
      }

      .\!pb-0 {
          padding-bottom: 0!important
      }

      .\!pl-12 {
          padding-left: 3rem!important
      }

      .\!pl-16 {
          padding-left: 4rem!important
      }

      .\!pl-4 {
          padding-left: 1rem!important
      }

      .\!pr-12 {
          padding-right: 3rem!important
      }

      .\!pr-4 {
          padding-right: 1rem!important
      }

      .\!pr-\[120px\] {
          padding-right: 120px!important
      }

      .\!pr-\[30px\] {
          padding-right: 30px!important
      }

      .\!pt-0 {
          padding-top: 0!important
      }

      .pb-1 {
          padding-bottom: .25rem
      }

      .pb-10 {
          padding-bottom: 2.5rem
      }

      .pb-2 {
          padding-bottom: .5rem
      }

      .pb-3 {
          padding-bottom: .75rem
      }

      .pb-4 {
          padding-bottom: 1rem
      }

      .pb-5 {
          padding-bottom: 1.25rem
      }

      .pb-6 {
          padding-bottom: 1.5rem
      }

      .pb-\[10px\] {
          padding-bottom: 10px
      }

      .pb-\[20px\] {
          padding-bottom: 20px
      }

      .pl-1 {
          padding-left: .25rem
      }

      .pl-11 {
          padding-left: 2.75rem
      }

      .pl-3 {
          padding-left: .75rem
      }

      .pl-4 {
          padding-left: 1rem
      }

      .pl-5 {
          padding-left: 1.25rem
      }

      .pl-\[40px\] {
          padding-left: 40px
      }

      .pr-2 {
          padding-right: .5rem
      }

      .pr-4 {
          padding-right: 1rem
      }

      .pr-\[10px\] {
          padding-right: 10px
      }

      .pt-0 {
          padding-top: 0
      }

      .pt-1 {
          padding-top: .25rem
      }

      .pt-2 {
          padding-top: .5rem
      }

      .pt-3 {
          padding-top: .75rem
      }

      .pt-4 {
          padding-top: 1rem
      }

      .pt-5 {
          padding-top: 1.25rem
      }

      .pt-6 {
          padding-top: 1.5rem
      }

      .pt-8 {
          padding-top: 2rem
      }

      .pt-\[10px\] {
          padding-top: 10px
      }

      .pt-\[30px\] {
          padding-top: 30px
      }

      .pt-\[40px\] {
          padding-top: 40px
      }

      .pt-\[50px\] {
          padding-top: 50px
      }

      .pt-\[60px\] {
          padding-top: 60px
      }

      .text-left {
          text-align: left
      }

      .text-center {
          text-align: center
      }

      .text-right {
          text-align: right
      }

      .text-end {
          text-align: end
      }

      .align-middle {
          vertical-align: middle
      }

      .\!text-\[11px\] {
          font-size: 11px!important
      }

      .\!text-sm {
          font-size: .875rem!important;
          line-height: 1.25rem!important
      }

      .\!text-xs {
          font-size: .75rem!important;
          line-height: 1rem!important
      }

      .text-2xl {
          font-size: 1.5rem;
          line-height: 2rem
      }

      .text-3xl {
          font-size: 1.875rem;
          line-height: 2.25rem
      }

      .text-\[10px\] {
          font-size: 10px
      }

      .text-\[11px\] {
          font-size: 11px
      }

      .text-\[12px\] {
          font-size: 12px
      }

      .text-\[13px\] {
          font-size: 13px
      }

      .text-\[14px\] {
          font-size: 14px
      }

      .text-\[15px\] {
          font-size: 15px
      }

      .text-\[18px\] {
          font-size: 18px
      }

      .text-\[20px\] {
          font-size: 20px
      }

      .text-\[22px\] {
          font-size: 22px
      }

      .text-\[30px\] {
          font-size: 30px
      }

      .text-\[7px\] {
          font-size: 7px
      }

      .text-base {
          font-size: 1rem;
          line-height: 1.5rem
      }

      .text-lg {
          font-size: 1.125rem;
          line-height: 1.75rem
      }

      .text-sm {
          font-size: .875rem;
          line-height: 1.25rem
      }

      .text-xl {
          font-size: 1.25rem;
          line-height: 1.75rem
      }

      .text-xs {
          font-size: .75rem;
          line-height: 1rem
      }

      .\!font-bold {
          font-weight: 700!important
      }

      .\!font-medium {
          font-weight: 500!important
      }

      .\!font-normal {
          font-weight: 400!important
      }

      .font-\[500\] {
          font-weight: 500
      }

      .font-black {
          font-weight: 900
      }

      .font-bold {
          font-weight: 700
      }

      .font-medium {
          font-weight: 500
      }

      .font-normal {
          font-weight: 400
      }

      .font-semibold {
          font-weight: 600
      }

      .uppercase {
          text-transform: uppercase
      }

      .capitalize {
          text-transform: capitalize
      }

      .italic {
          font-style: italic
      }

      .leading-6 {
          line-height: 1.5rem
      }

      .leading-none {
          line-height: 1
      }

      .\!text-text-base {
          color: var(--text-base)!important
      }

      .\!text-white {
          --tw-text-opacity: 1!important;
          color: rgb(255 255 255/var(--tw-text-opacity))!important
      }

      .text-\[\#000\] {
          --tw-text-opacity: 1;
          color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .text-\[\#009D36\] {
          --tw-text-opacity: 1;
          color: rgb(0 157 54/var(--tw-text-opacity))
      }

      .text-\[\#111111\] {
          --tw-text-opacity: 1;
          color: rgb(17 17 17/var(--tw-text-opacity))
      }

      .text-\[\#46AD4D\] {
          --tw-text-opacity: 1;
          color: rgb(70 173 77/var(--tw-text-opacity))
      }

      .text-\[\#50A69A\] {
          --tw-text-opacity: 1;
          color: rgb(80 166 154/var(--tw-text-opacity))
      }

      .text-\[\#6CB943\] {
          --tw-text-opacity: 1;
          color: rgb(108 185 67/var(--tw-text-opacity))
      }

      .text-\[\#838383\] {
          --tw-text-opacity: 1;
          color: rgb(131 131 131/var(--tw-text-opacity))
      }

      .text-\[\#919191\] {
          --tw-text-opacity: 1;
          color: rgb(145 145 145/var(--tw-text-opacity))
      }

      .text-\[\#C98DFF\] {
          --tw-text-opacity: 1;
          color: rgb(201 141 255/var(--tw-text-opacity))
      }

      .text-\[\#E3E3E3\] {
          --tw-text-opacity: 1;
          color: rgb(227 227 227/var(--tw-text-opacity))
      }

      .text-\[\#E94951\] {
          --tw-text-opacity: 1;
          color: rgb(233 73 81/var(--tw-text-opacity))
      }

      .text-\[\#FABB1F\] {
          --tw-text-opacity: 1;
          color: rgb(250 187 31/var(--tw-text-opacity))
      }

      .text-\[\#FEB909\] {
          --tw-text-opacity: 1;
          color: rgb(254 185 9/var(--tw-text-opacity))
      }

      .text-\[\#FF0000\] {
          --tw-text-opacity: 1;
          color: rgb(255 0 0/var(--tw-text-opacity))
      }

      .text-\[\#FFC04A\] {
          --tw-text-opacity: 1;
          color: rgb(255 192 74/var(--tw-text-opacity))
      }

      .text-\[\#FFDB00\] {
          --tw-text-opacity: 1;
          color: rgb(255 219 0/var(--tw-text-opacity))
      }

      .text-\[\#fff\] {
          --tw-text-opacity: 1;
          color: rgb(255 255 255/var(--tw-text-opacity))
      }

      .text-\[var\(--ms-diary-text-color\)\] {
          color: var(--ms-diary-text-color)
      }

      .text-accent {
          color: var(--accent)
      }

      .text-black {
          --tw-text-opacity: 1;
          color: rgb(0 0 0/var(--tw-text-opacity))
      }

      .text-primary {
          color: var(--primary)
      }

      .text-primary-dark {
          color: var(--primary-dark)
      }

      .text-primary-light {
          color: var(--primary-light)
      }

      .text-secondary {
          color: var(--secondary)
      }

      .text-text-base {
          color: var(--text-base)
      }

      .text-text-light {
          color: var(--text-light)
      }

      .text-text-lighter {
          color: var(--text-lighter)
      }

      .text-white {
          --tw-text-opacity: 1;
          color: rgb(255 255 255/var(--tw-text-opacity))
      }

      .\!underline {
          text-decoration-line: underline!important
      }

      .underline {
          text-decoration-line: underline
      }

      .decoration-solid {
          text-decoration-style: solid
      }

      .opacity-0 {
          opacity: 0
      }

      .opacity-50 {
          opacity: .5
      }

      .opacity-60 {
          opacity: .6
      }

      .opacity-70 {
          opacity: .7
      }

      .opacity-80 {
          opacity: .8
      }

      .shadow {
          --tw-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
          --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)
      }

      .shadow,.shadow-lg {
          box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
      }

      .shadow-lg {
          --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
          --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)
      }

      .shadow-md {
          --tw-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
          --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)
      }

      .shadow-md,.shadow-sm {
          box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
      }

      .shadow-sm {
          --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
          --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
      }

      .outline-none {
          outline: 2px solid transparent;
          outline-offset: 2px
      }

      .outline {
          outline-style: solid
      }

      .outline-black {
          outline-color: #000
      }

      .outline-primary {
          outline-color: var(--primary)
      }

      .blur {
          --tw-blur: blur(8px)
      }

      .blur,.grayscale {
          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .grayscale {
          --tw-grayscale: grayscale(100%)
      }

      .invert {
          --tw-invert: invert(100%)
      }

      .invert,.sepia {
          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .sepia {
          --tw-sepia: sepia(100%)
      }

      .filter {
          filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
      }

      .backdrop-filter {
          -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
      }

      .transition {
          transition-duration: .15s;
          transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
          transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
          transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
          transition-timing-function: cubic-bezier(.4,0,.2,1)
      }

      .transition-all {
          transition-duration: .15s;
          transition-property: all;
          transition-timing-function: cubic-bezier(.4,0,.2,1)
      }

      .duration-300 {
          transition-duration: .3s
      }

      .duration-500 {
          transition-duration: .5s
      }

      .ease-in-out {
          transition-timing-function: cubic-bezier(.4,0,.2,1)
      }

      @media (min-width: 640px) {
        .sm\:ml-0 {
            margin-left:0
        }

        .sm\:mt-0 {
            margin-top: 0
        }

        .sm\:block {
            display: block
        }

        .sm\:w-\[100px\] {
            width: 100px
        }

        .sm\:w-fit {
            width: -moz-fit-content;
            width: fit-content
        }

        .sm\:w-full {
            width: 100%
        }

        .sm\:max-w-none {
            max-width: none
        }

        .sm\:flex-shrink-0 {
            flex-shrink: 0
        }

        .sm\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .sm\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .sm\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .sm\:flex-row {
            flex-direction: row
        }

        .sm\:justify-start {
            justify-content: flex-start
        }

        .sm\:p-5 {
            padding: 1.25rem
        }

        .sm\:py-2 {
            padding-bottom: .5rem;
            padding-top: .5rem
        }

        .sm\:text-base {
            font-size: 1rem;
            line-height: 1.5rem
        }

        .sm\:text-sm {
            font-size: .875rem;
            line-height: 1.25rem
        }

        .sm\:text-xs {
            font-size: .75rem;
            line-height: 1rem
        }
    }

    @media (min-width: 768px) {
        .md\:relative {
            position:relative
        }

        .md\:right-4 {
            right: 1rem
        }

        .md\:top-\[40px\] {
            top: 40px
        }

        .md\:order-1 {
            order: 1
        }

        .md\:order-2 {
            order: 2
        }

        .md\:order-3 {
            order: 3
        }

        .md\:order-4 {
            order: 4
        }

        .md\:col-span-1 {
            grid-column: span 1/span 1
        }

        .md\:col-span-2 {
            grid-column: span 2/span 2
        }

        .md\:col-span-3 {
            grid-column: span 3/span 3
        }

        .md\:col-span-9 {
            grid-column: span 9/span 9
        }

        .md\:mx-0 {
            margin-left: 0;
            margin-right: 0
        }

        .md\:mb-0 {
            margin-bottom: 0
        }

        .md\:mb-5 {
            margin-bottom: 1.25rem
        }

        .md\:mb-6 {
            margin-bottom: 1.5rem
        }

        .md\:mb-7 {
            margin-bottom: 1.75rem
        }

        .md\:ml-4 {
            margin-left: 1rem
        }

        .md\:mr-2 {
            margin-right: .5rem
        }

        .md\:mt-0 {
            margin-top: 0
        }

        .md\:mt-1 {
            margin-top: .25rem
        }

        .md\:mt-10 {
            margin-top: 2.5rem
        }

        .md\:mt-14 {
            margin-top: 3.5rem
        }

        .md\:mt-16 {
            margin-top: 4rem
        }

        .md\:mt-2 {
            margin-top: .5rem
        }

        .md\:mt-20 {
            margin-top: 5rem
        }

        .md\:mt-3 {
            margin-top: .75rem
        }

        .md\:mt-4 {
            margin-top: 1rem
        }

        .md\:mt-5 {
            margin-top: 1.25rem
        }

        .md\:mt-6 {
            margin-top: 1.5rem
        }

        .md\:mt-8 {
            margin-top: 2rem
        }

        .md\:mt-\[10px\] {
            margin-top: 10px
        }

        .md\:mt-\[20px\] {
            margin-top: 20px
        }

        .md\:mt-\[30px\] {
            margin-top: 30px
        }

        .md\:\!block {
            display: block!important
        }

        .md\:block {
            display: block
        }

        .md\:inline-block {
            display: inline-block
        }

        .md\:flex {
            display: flex
        }

        .md\:grid {
            display: grid
        }

        .md\:\!hidden {
            display: none!important
        }

        .md\:hidden {
            display: none
        }

        .md\:h-3 {
            height: .75rem
        }

        .md\:h-40 {
            height: 10rem
        }

        .md\:h-48 {
            height: 12rem
        }

        .md\:h-5 {
            height: 1.25rem
        }

        .md\:h-6 {
            height: 1.5rem
        }

        .md\:h-9 {
            height: 2.25rem
        }

        .md\:h-\[120px\] {
            height: 120px
        }

        .md\:h-\[170px\] {
            height: 170px
        }

        .md\:h-\[200px\] {
            height: 200px
        }

        .md\:h-\[30px\] {
            height: 30px
        }

        .md\:h-\[35px\] {
            height: 35px
        }

        .md\:h-\[36px\] {
            height: 36px
        }

        .md\:h-\[40px\] {
            height: 40px
        }

        .md\:h-\[60px\] {
            height: 60px
        }

        .md\:h-\[62px\] {
            height: 62px
        }

        .md\:h-\[86px\] {
            height: 86px
        }

        .md\:h-\[89px\] {
            height: 89px
        }

        .md\:h-\[95px\] {
            height: 95px
        }

        .md\:h-auto {
            height: auto
        }

        .md\:h-full {
            height: 100%
        }

        .md\:max-h-\[132px\] {
            max-height: 132px
        }

        .md\:min-h-\[27\.83px\] {
            min-height: 27.83px
        }

        .md\:\!w-\[300px\] {
            width: 300px!important
        }

        .md\:w-14 {
            width: 3.5rem
        }

        .md\:w-20 {
            width: 5rem
        }

        .md\:w-4 {
            width: 1rem
        }

        .md\:w-40 {
            width: 10rem
        }

        .md\:w-48 {
            width: 12rem
        }

        .md\:w-5 {
            width: 1.25rem
        }

        .md\:w-6 {
            width: 1.5rem
        }

        .md\:w-8 {
            width: 2rem
        }

        .md\:w-9 {
            width: 2.25rem
        }

        .md\:w-\[100px\] {
            width: 100px
        }

        .md\:w-\[120px\] {
            width: 120px
        }

        .md\:w-\[130px\] {
            width: 130px
        }

        .md\:w-\[150px\] {
            width: 150px
        }

        .md\:w-\[20px\] {
            width: 20px
        }

        .md\:w-\[28px\] {
            width: 28px
        }

        .md\:w-\[30px\] {
            width: 30px
        }

        .md\:w-\[320px\] {
            width: 320px
        }

        .md\:w-\[36px\] {
            width: 36px
        }

        .md\:w-\[400px\] {
            width: 400px
        }

        .md\:w-\[40px\] {
            width: 40px
        }

        .md\:w-\[500px\] {
            width: 500px
        }

        .md\:w-\[50px\] {
            width: 50px
        }

        .md\:w-\[60px\] {
            width: 60px
        }

        .md\:w-\[89px\] {
            width: 89px
        }

        .md\:w-\[95px\] {
            width: 95px
        }

        .md\:w-auto {
            width: auto
        }

        .md\:w-fit {
            width: -moz-fit-content;
            width: fit-content
        }

        .md\:w-full {
            width: 100%
        }

        .md\:min-w-\[100px\] {
            min-width: 100px
        }

        .md\:min-w-\[110px\] {
            min-width: 110px
        }

        .md\:min-w-\[36px\] {
            min-width: 36px
        }

        .md\:max-w-\[250px\] {
            max-width: 250px
        }

        .md\:max-w-\[300px\] {
            max-width: 300px
        }

        .md\:max-w-\[350px\] {
            max-width: 350px
        }

        .md\:max-w-\[400px\] {
            max-width: 400px
        }

        .md\:max-w-\[500px\] {
            max-width: 500px
        }

        .md\:grid-cols-11 {
            grid-template-columns: repeat(11,minmax(0,1fr))
        }

        .md\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .md\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .md\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .md\:grid-cols-5 {
            grid-template-columns: repeat(5,minmax(0,1fr))
        }

        .md\:flex-row {
            flex-direction: row
        }

        .md\:flex-col-reverse {
            flex-direction: column-reverse
        }

        .md\:items-start {
            align-items: flex-start
        }

        .md\:items-center {
            align-items: center
        }

        .md\:justify-start {
            justify-content: flex-start
        }

        .md\:justify-center {
            justify-content: center
        }

        .md\:justify-between {
            justify-content: space-between
        }

        .md\:gap-3 {
            gap: .75rem
        }

        .md\:gap-4 {
            gap: 1rem
        }

        .md\:gap-5 {
            gap: 1.25rem
        }

        .md\:gap-6 {
            gap: 1.5rem
        }

        .md\:gap-\[10px\] {
            gap: 10px
        }

        .md\:gap-\[50px\] {
            gap: 50px
        }

        .md\:gap-x-5 {
            -moz-column-gap: 1.25rem;
            column-gap: 1.25rem
        }

        .md\:justify-self-center {
            justify-self: center
        }

        .md\:\!rounded-\[10px\] {
            border-radius: 10px!important
        }

        .md\:\!rounded-xl {
            border-radius: .75rem!important
        }

        .md\:rounded-2xl {
            border-radius: 1rem
        }

        .md\:rounded-3xl {
            border-radius: 1.5rem
        }

        .md\:rounded-\[10px\] {
            border-radius: 10px
        }

        .md\:rounded-\[15px\] {
            border-radius: 15px
        }

        .md\:rounded-\[20px\] {
            border-radius: 20px
        }

        .md\:rounded-\[23px\] {
            border-radius: 23px
        }

        .md\:rounded-\[5px\] {
            border-radius: 5px
        }

        .md\:rounded-none {
            border-radius: 0
        }

        .md\:rounded-xl {
            border-radius: .75rem
        }

        .md\:border {
            border-width: 1px
        }

        .md\:border-\[6px\] {
            border-width: 6px
        }

        .md\:border-none {
            border-style: none
        }

        .md\:border-line {
            border-color: var(--line)
        }

        .md\:\!bg-white {
            --tw-bg-opacity: 1!important;
            background-color: rgb(255 255 255/var(--tw-bg-opacity))!important
        }

        .md\:bg-\[\#1D1D1D\] {
            --tw-bg-opacity: 1;
            background-color: rgb(29 29 29/var(--tw-bg-opacity))
        }

        .md\:bg-primary-light {
            background-color: var(--primary-light)
        }

        .md\:\!p-10 {
            padding: 2.5rem!important
        }

        .md\:p-0 {
            padding: 0
        }

        .md\:p-3 {
            padding: .75rem
        }

        .md\:p-4 {
            padding: 1rem
        }

        .md\:p-5 {
            padding: 1.25rem
        }

        .md\:p-6 {
            padding: 1.5rem
        }

        .md\:p-\[10px\] {
            padding: 10px
        }

        .md\:p-\[20px\] {
            padding: 20px
        }

        .md\:\!px-5 {
            padding-left: 1.25rem!important;
            padding-right: 1.25rem!important
        }

        .md\:\!py-3 {
            padding-bottom: .75rem!important;
            padding-top: .75rem!important
        }

        .md\:px-10 {
            padding-left: 2.5rem;
            padding-right: 2.5rem
        }

        .md\:px-3 {
            padding-left: .75rem;
            padding-right: .75rem
        }

        .md\:px-4 {
            padding-left: 1rem;
            padding-right: 1rem
        }

        .md\:px-5 {
            padding-left: 1.25rem;
            padding-right: 1.25rem
        }

        .md\:px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

        .md\:px-8 {
            padding-left: 2rem;
            padding-right: 2rem
        }

        .md\:px-\[20px\] {
            padding-left: 20px;
            padding-right: 20px
        }

        .md\:px-\[30px\] {
            padding-left: 30px;
            padding-right: 30px
        }

        .md\:py-10 {
            padding-bottom: 2.5rem;
            padding-top: 2.5rem
        }

        .md\:py-3 {
            padding-bottom: .75rem;
            padding-top: .75rem
        }

        .md\:py-4 {
            padding-bottom: 1rem;
            padding-top: 1rem
        }

        .md\:py-5 {
            padding-bottom: 1.25rem;
            padding-top: 1.25rem
        }

        .md\:py-6 {
            padding-bottom: 1.5rem;
            padding-top: 1.5rem
        }

        .md\:py-\[25px\] {
            padding-bottom: 25px;
            padding-top: 25px
        }

        .md\:pb-10 {
            padding-bottom: 2.5rem
        }

        .md\:pb-4 {
            padding-bottom: 1rem
        }

        .md\:pb-5 {
            padding-bottom: 1.25rem
        }

        .md\:pb-8 {
            padding-bottom: 2rem
        }

        .md\:pl-0 {
            padding-left: 0
        }

        .md\:pl-10 {
            padding-left: 2.5rem
        }

        .md\:pl-6 {
            padding-left: 1.5rem
        }

        .md\:pl-\[50px\] {
            padding-left: 50px
        }

        .md\:pr-2 {
            padding-right: .5rem
        }

        .md\:pt-0 {
            padding-top: 0
        }

        .md\:pt-\[10px\] {
            padding-top: 10px
        }

        .md\:text-left {
            text-align: left
        }

        .md\:\!text-sm {
            font-size: .875rem!important;
            line-height: 1.25rem!important
        }

        .md\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .md\:text-3xl {
            font-size: 1.875rem;
            line-height: 2.25rem
        }

        .md\:text-\[14px\] {
            font-size: 14px
        }

        .md\:text-\[18px\] {
            font-size: 18px
        }

        .md\:text-\[22px\] {
            font-size: 22px
        }

        .md\:text-\[40px\] {
            font-size: 40px
        }

        .md\:text-base {
            font-size: 1rem;
            line-height: 1.5rem
        }

        .md\:text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem
        }

        .md\:text-sm {
            font-size: .875rem;
            line-height: 1.25rem
        }

        .md\:text-xl {
            font-size: 1.25rem;
            line-height: 1.75rem
        }

        .md\:text-xs {
            font-size: .75rem;
            line-height: 1rem
        }

        .md\:font-bold {
            font-weight: 700
        }

        .md\:font-medium {
            font-weight: 500
        }

        .md\:font-normal {
            font-weight: 400
        }

        .md\:text-accent {
            color: var(--accent)
        }
    }

    @media (min-width: 1024px) {
        .lg\:col-span-3 {
            grid-column:span 3/span 3
        }

        .lg\:col-span-5 {
            grid-column: span 5/span 5
        }

        .lg\:block {
            display: block
        }

        .lg\:flex {
            display: flex
        }

        .lg\:hidden {
            display: none
        }

        .lg\:h-\[40px\] {
            height: 40px
        }

        .lg\:w-\[1000px\] {
            width: 1000px
        }

        .lg\:w-\[80px\] {
            width: 80px
        }

        .lg\:max-w-\[506px\] {
            max-width: 506px
        }

        .lg\:max-w-\[760px\] {
            max-width: 760px
        }

        .lg\:max-w-\[800px\] {
            max-width: 800px
        }

        .lg\:max-w-\[820px\] {
            max-width: 820px
        }

        .lg\:max-w-\[920px\] {
            max-width: 920px
        }

        .lg\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .lg\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .lg\:grid-cols-5 {
            grid-template-columns: repeat(5,minmax(0,1fr))
        }

        .lg\:grid-cols-6 {
            grid-template-columns: repeat(6,minmax(0,1fr))
        }

        .lg\:flex-row {
            flex-direction: row
        }

        .lg\:gap-4 {
            gap: 1rem
        }

        .lg\:gap-6 {
            gap: 1.5rem
        }

        .lg\:gap-\[50px\] {
            gap: 50px
        }

        .lg\:px-0 {
            padding-left: 0;
            padding-right: 0
        }

        .lg\:text-2xl {
            font-size: 1.5rem;
            line-height: 2rem
        }

        .lg\:text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem
        }

        .lg\:text-sm {
            font-size: .875rem;
            line-height: 1.25rem
        }
    }

    @media (min-width: 1280px) {
        .xl\:col-span-1 {
            grid-column:span 1/span 1
        }

        .xl\:col-span-10 {
            grid-column: span 10/span 10
        }

        .xl\:col-span-2 {
            grid-column: span 2/span 2
        }

        .xl\:col-span-3 {
            grid-column: span 3/span 3
        }

        .xl\:col-span-4 {
            grid-column: span 4/span 4
        }

        .xl\:col-span-5 {
            grid-column: span 5/span 5
        }

        .xl\:col-span-6 {
            grid-column: span 6/span 6
        }

        .xl\:col-span-7 {
            grid-column: span 7/span 7
        }

        .xl\:col-span-8 {
            grid-column: span 8/span 8
        }

        .xl\:mt-0 {
            margin-top: 0
        }

        .xl\:mt-3 {
            margin-top: .75rem
        }

        .xl\:mt-4 {
            margin-top: 1rem
        }

        .xl\:block {
            display: block
        }

        .xl\:grid {
            display: grid
        }

        .xl\:hidden {
            display: none
        }

        .xl\:w-auto {
            width: auto
        }

        .xl\:w-full {
            width: 100%
        }

        .xl\:max-w-\[1110px\] {
            max-width: 1110px
        }

        .xl\:max-w-none {
            max-width: none
        }

        .xl\:grid-cols-2 {
            grid-template-columns: repeat(2,minmax(0,1fr))
        }

        .xl\:grid-cols-3 {
            grid-template-columns: repeat(3,minmax(0,1fr))
        }

        .xl\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .xl\:grid-cols-5 {
            grid-template-columns: repeat(5,minmax(0,1fr))
        }

        .xl\:grid-cols-8 {
            grid-template-columns: repeat(8,minmax(0,1fr))
        }

        .xl\:flex-row {
            flex-direction: row
        }

        .xl\:gap-5 {
            gap: 1.25rem
        }

        .xl\:gap-6 {
            gap: 1.5rem
        }

        .xl\:gap-\[0px\] {
            gap: 0
        }

        .xl\:gap-x-8 {
            -moz-column-gap: 2rem;
            column-gap: 2rem
        }

        .xl\:self-start {
            align-self: flex-start
        }

        .xl\:justify-self-auto {
            justify-self: auto
        }

        .xl\:justify-self-end {
            justify-self: end
        }

        .xl\:px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem
        }

        .xl\:text-lg {
            font-size: 1.125rem;
            line-height: 1.75rem
        }

        .xl\:text-sm {
            font-size: .875rem;
            line-height: 1.25rem
        }
    }

    @media (min-width: 1536px) {
        .\32xl\:col-span-2 {
            grid-column:span 2/span 2
        }

        .\32xl\:col-span-3 {
            grid-column: span 3/span 3
        }

        .\32xl\:col-span-7 {
            grid-column: span 7/span 7
        }

        .\32xl\:col-span-9 {
            grid-column: span 9/span 9
        }

        .\32xl\:w-full {
            width: 100%
        }

        .\32xl\:grid-cols-4 {
            grid-template-columns: repeat(4,minmax(0,1fr))
        }

        .\32xl\:grid-cols-5 {
            grid-template-columns: repeat(5,minmax(0,1fr))
        }

        .\32xl\:gap-6 {
            gap: 1.5rem
        }

        .\32xl\:justify-self-auto {
            justify-self: auto
        }
    }

    .top-history-icon {
        font-size: 25px;
    }

    .bubble-container-holder .main-title-holder.deposit-title-holder {
        justify-content: space-between;
    }

    .deposit-type-btn-container {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .deposit-type-btn {
        padding: 10px 15px;
        background: #3C4488;
        border-radius: 10px;
        cursor: pointer;
    }

    .deposit-type-btn.active {
        background: #6849EF;
    }

    .deposit_type_method {
        margin: 20px 0;
    }

    .deposit_method_container {
        background: #481b1b;
        border-radius: 10px;
        padding: 15px;
    }

    .deposit_method_container .deposit_method_title {
        margin-bottom: 15px;
    }

    .deposit_method_container .deposit_method_body {
        margin-bottom: 15px;
    }

    .deposit_method_container .deposit_method_show_btn {
        text-align: center;
        color: #F9BB1F;
        cursor: pointer;
        width: max-content;
        margin: 0 auto;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item {
        display: flex;
        gap: 15px;
        background: #390707;
        align-items: center;
        padding: 15px;
        border-radius: 10px;
        cursor: pointer;
        margin-bottom: 5px;
        position: relative;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item:hover {
        background: #973535;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item_expand {
        height: 0;
        overflow: hidden;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item_expand.active {
        height: auto;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_img {
        border-right: 2px solid #efb824;
        padding-right: 15px;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_img img {
        width: 100%;
        max-width: 50px;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_details {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_details .deposit_method_body_item_limit {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .deposit_method_body_item_arrow {
        color: #CEC9D5;
        font-size: 12px;
    }
    
    /* deposit method ribbon */
    .ribbon {
        width: 50px;
        height: 50px;
        overflow: hidden;
        position: absolute;
    }

    .ribbon::before,
    .ribbon::after {
        position: absolute;
        z-index: -1;
        content: '';
        display: block;
        /* border: 5px solid #2980b9; */
    }

    .ribbon:before{
        border: 5px solid #FDA42C;
    }

    .ribbon:after{
        border: 5px solid #D16100;
    }

    .ribbon span {
        position: absolute;
        display: block;
        width: 100px;
        padding: 6px 0;
        background: linear-gradient(to right, #FDA42C 0%, #D16100 100%);
        box-shadow: 0 5px 10px rgba(0,0,0,.1);
        color: #fff;
        font: 700 6px/1 'Lato', sans-serif;
        text-shadow: 0 1px 1px rgba(0,0,0,.2);
        text-transform: uppercase;
        text-align: center;
    }

    .ribbon-top-right {
        top: 0;
        right: 0;
    }
    .ribbon-top-right::before,
    .ribbon-top-right::after {
        border-top-color: transparent;
        border-right-color: transparent;
    }
    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }
    .ribbon-top-right::after {
        bottom: 0;
        right: 0;
    }
    .ribbon-top-right span {
        left: -18px;
        top: 10px;
        transform: rotate(45deg);
    }
    /* deposit method ribbon end */

    .payment_process_holder {
        width: 80%;
    }

    .deposit_type_method .payment_process_holder:has(.no-record) {
        width: 100%;
    }

    .payment_process_method, 
    .payment_process_label,
    .payment_process_form_input,
    .deposit_preset_container {
        margin-bottom: 10px;
    }

    .payment_process_method_item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background: #2B325F;
        border-radius: 10px;
        cursor: pointer;
    }

    .payment_process_method_bank_details {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .payment_process_method_bank_img {
        max-width: 40px;
    }

    .deposit_preset_container .input-box-option {
        border-radius: 7px;
        border: 1px solid #575FA0;
        color: #CACACA;
        text-align: center;
        cursor: pointer;
        margin-right: 5px;
        margin-bottom: 5px;
        padding: 10px;
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        transition: .5s;
        width: calc(100% / 5 - 10px);
    }

    .deposit_preset_container .input-box-option.active, .deposit_preset_container .input-box-option:hover {
        background: rgba(129, 87, 172, .3);
        border: 1px solid #B48BDD;
    }

    .payment_process_form_input .jErr {

    }

    .button-submit-deposit-wrapper {
        display: inline-flex;
        width: 100%;
        align-items: center;
        margin-top: 20px;
    }

    .crypto_currency_selection,
    .crypto_network_selection {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }

    .crypto_min_bonus,
    .crypto_address_label {
        margin-bottom: 15px;
    }

    .crypto_currency_top_selection {
        display: flex;
        width: 80%;
    }

    .crypto_currency_top_selection_item {
        display: flex;
        align-items: center;
        gap: 5px;
        border: 1px solid #575FA0;
        padding: 5px 10px;
        border-radius: 30px;
        cursor: pointer;
    }

    .crypto_currency_top_selection_item.active {
        border: 1px solid #B48BDD;
        background: #8157AC66;
    }

    .crypto_selected_option {
        display: flex;
        justify-content: space-between;
        background: #CEC9D5;
        color: #000;
        padding: 10px;
        border-radius: 10px;
    }

    .crypto_selected_option_name {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .crypto_currency_top_selection_item .img-responsive,
    .crypto_selected_option_name .img-responsive {
        max-width: 25px;
    }

    .crypto_dropdown_container {
        position: relative;
        /* cursor: pointer; */
    }

    .crypto_selected_option_balance {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .crypto_balance_holder {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .crypto_balance_holder.tick-holder {
        background: #009D36;
        padding: 8px;
        border-radius: 50%;
    }

    .crypto_dropdown_select {
        background: #1E2240;
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        width: 100%;
        z-index: 5;
        margin-top: 5px;
    }

    .search_crypto_container {
        position: relative;
        margin-bottom: 8px;
    }

    .search_crypto_input {
        display: block;
        width: 100%;
        background: #222753;
        outline: 0;
        border: 0;
        border-radius: 10px;
        padding: 10px;
        padding-left: 35px;
    }

    .search_crypto_container .icon-search {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 5px;
        font-size: 20px;
    }

    .crypto_list {
        max-height: 250px;
        overflow-y: auto;
    }

    .crypto_list_item {
        display: flex;
        justify-content: space-between;
        background: #4450A2;
        padding: 10px;
        border-radius: 10px;
        margin-bottom: 5px;
    }

    .crypto_list_item:last-child {
        margin-bottom: 0;
    }

    .crypto_qr_adress_container {
        display: flex;
        align-items: center;
        gap: 30px;
        background: #1B1152;
        border-radius: 10px;
        padding: 10px 20px;
        margin-bottom: 15px;
    }

    .crypto_qr_adress_container .crypto_qr_img {
        background: #fff;
        border-radius: 14px;
        padding: 10px;
    }

    .crypto_qr_img .img-responsive {
        max-width: 150px;
    }

    .crypto_wallet_address_wrapper {
        position: relative;
    }

    .crypto_address_holder {
        width: 100%;
    }

    .crypto_wallet_address_wrapper .crypto_wallet_address {
        width: 100%;
        display: block;
        background: #080808;
        border: 0;
        outline: 0;
        padding: 10px;
        border-radius: 10px;
        padding-right: 80px;
        color: #A0A0A0;
    }

    .crypto_wallet_address_wrapper .button-copy {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        color: #FFCE00;
        cursor: pointer;
        height: auto;
        min-width: unset;
        padding: unset;
    }

    .crypto_notice {
        background: #0E143C;
        padding: 10px;
        border-radius: 10px;
    }

    .crypto_notice .notice-color {
        color: #F9BB1F;
    }

    @media only screen and (max-width: 800px) {
        .deposit-type-btn-container {
            width: 100%;
        }

        .deposit-type-btn {
            width: calc(100% / 2);
            text-align: center;
        }

        .payment_process_holder {
            width: 100%;
        }

        .crypto_qr_adress_container {
            flex-direction: column;
        }

    }

    @media only screen and (max-width: 500px) {
        .deposit_method_container .deposit_method_body .deposit_method_body_item {
            padding: 15px 10px;
            gap: 10px;
        }

        .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_img {
            padding-right: 10px;
        }

        .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_img img {
            max-width: 35px;
        }

        .deposit_method_container .deposit_method_body .deposit_method_body_item .deposit_method_body_item_details {
            font-size: 12px;
        }
    }
        /* Start of referral banner css */
        .referral-banner {
            background: linear-gradient(135deg ,#871212 0%, #a45353 100%);
            position: relative;
            margin-top: 50px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            border-radius: 10px;
            padding: 0 2%;
            contain: content;
        }
    
        .ref-qr-and-link-container {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
        }
    
        .ref-qr-and-link-container .qr_code_holder {
            /*width: 100px;*/
            display: flex;
            align-items: center;
        }
    
    
    
        .align-item-flex-start {
            align-items: flex-start !important;
        }
    
        .downl-ref-qr-img {
            width: 100px;
            padding: 8px 6px;
            background: transparent;
            border-radius: 30px;
            color: #FFFFFF;
            border: 1px solid #FFFFFF;
            font-size: 12px;
            margin-left: 20px;
        }
    
        .ref-qr-img{
            padding: 3px;
            background: #FFFFFF;
            border-radius: 10px;
            /*width: fit-content;*/
            width: 100px;
        }
    
        .referral-banner .referral-banner-text {
            align-self: center;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    
        .referral-banner .referral-banner-text .body-text {
            line-height: 1.5;
        }
    
        .referral-banner .referral-banner-text .referral-banner-title {
            font-size: clamp(14px, 1.5vw, 25px);
            margin-bottom: 10px;
        }
    
        .referral-banner .referral-banner-text .referral-banner-title .title-text {
            display: inline-block;
        }
    
        .referral-banner .referral-banner-text .referral-banner-title .rbt-left {
            color: #FFFFFF;
        }
    
        .referral-banner .referral-banner-text .referral-banner-title .rbt-right {
            color: #FFCE00;
        }
    
        .referral-banner .referral-banner-text .referral-banner-body {
            display: flex;
            gap: 2%;
        }
    
        .referral-banner .referral-banner-text .referral-banner-body .rbanner-amount{
            font-size: 18px;
            color: #FFC04A;
            font-weight: 600;
            padding-bottom: 12px;
        }
    
        .referral-banner .referral-banner-text .referral-banner-body .rbanner-amount span{
            font-size: 14px;
            /* cursor: pointer; */
        }
    
        .referral-banner .referral-banner-text .referral-banner-body .banner-info-icons {
            font-size: clamp(14px, 1.5vw, 30px);
            margin-bottom: 10px;
        }
    
        .referral-banner .referral-banner-text .referral-banner-body .body-info {
            font-size: clamp(10px, 0.8vw, 16px);
        }
    
        .referral-banner .referral-banner-text .referral-banner-body .divider {
            font-size: clamp(14px, 2vw, 50px);
            align-self: center;
        }
    
        .referral-banner .referral-banner-img-wrapper {
            position: relative;
            align-self: end;
            font-size: clamp(8px, 0.8vw, 14px);
        }
    
        .referral-banner .referral-people {
            margin-bottom: -17%;
            margin-top: -8%;
        }
    
        .referral-banner .laughing-face {
            width: 3em;
            height: 3em;
            position: absolute;
        }
    
        .referral-banner .laughing-face-left {
            top: 25%;
            left: -15%;
            transform: rotate(-27deg);
        }
    
        .referral-banner .laughing-face-right {
            top: 28%;
            right: -3%;
            transform: rotate(17deg);
        }
    
        .referral-desc-mob {
            display: none;
        }
        /* end of referral banner css */
    
        .referralSH{
            margin-top: 15px;
            /*margin-bottom: 30px;*/
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
    
        .referralSH .referralSH-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 10px;
            align-items: flex-start;
            background: linear-gradient(to right,#973535 0%, #973535 100%);
            padding: 15px 25px;
            border-radius: 15px;
            width: calc(100% / 4 - 10px);
            font-size: 12px;
            color: #FFFFFF;
        }
    
        
    
        .referral-btn-holder{
            margin-top: 30px;
            background: #3C4488;
            width: fit-content;
            border-radius: 15px;
        }
    
        .referral-btn-holder .dashboard-button{
            padding: 15px 10px;
            font-weight: 500;
            background: #3C4488;
            color: #fff;
        }
    
        .referral-btn-holder .dashboard-button.active{
            background: #6849EF;
        }
    
    
    
        .referral-cont .hasDatepicker, .referral-cont .hasDatepicker::placeholder{
            color: #000000 !important;
        }
    
        #vBtnSearch{
            padding: 12px;
            font-weight: 500;
            font-size: 14px;
        }
    
        /*new css*/
    
        .ref-new-holder{
            background: #481b1b;
            border-radius: 20px;
            padding: 20px;
            margin-top: 30px;
        }
    
        .ref-new-holder .content{
            display: flex;
            flex-flow: row wrap;
        }
    
        .ref-new-holder .content .refInfo{
            width: 40%;
            padding: 20px;
        }
    
        .ref-new-holder .content .refStatus{
            width: 60%;
            padding: 20px;
        }
    
        .ref-feature-cont{
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            padding-top: 30px;
            overflow-x: auto;
            overflow-y: hidden;
             -ms-overflow-style: none;
            scrollbar-width: none; 
        }
    
        .ref-feature-cont::-webkit-scrollbar {
            display: none;
        }
    
     
        .ref-feature-cont .box{
            border-radius: 20px;
            background: linear-gradient(to right, #3D48AC 0%, #3F1D7C 100%);
            display: flex;
            align-items: center;        
            padding: 20px;
        }
    
        .ref-feature-cont .box .leftimg{
            width: 80px;
            padding: 10px;
        }
    
        .ref-feature-cont .box .rightContent{
            font-size: 12px;
        }
    
        .ref-feature-cont .box .rightAm{
            color: #FFC04A;
            font-weight: 600;
            font-size: 18px;
        }   
    
    
        .ref-flow-box{
            margin-top: 20px;
        }
    
        .ref-flow-box .box-header{
            display: flex;
            align-items: center;
            background: #0E143C;
            padding: 15px 20px;
            border-radius: 12px;
        }
    
        .ref-flow-box .box-header.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    
        .ref-flow-box .box-header p{
            margin-left: 10px;
        }
    
        .ref-flow-box .box-body{
            padding: 10px 30px;
            background: #0E143C;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
    
        .ref-rank-holder{
    
            display: flex;
            margin-top: 20px;
            justify-content: space-between;
    
        }
    
        .ref-rank-holder .refRankBox{
            width: calc(100% / 2 - 8px);
            background: #0E143C;
            border-radius: 15px;
            padding: 30px;
        }
    
        .ref-rank-holder .refRankBox .title{
            color: #FABB1F;
            padding-bottom: 20px;
        }
    
        .ref-rank-holder .ranking{
    
            height: 180px;
            overflow: hidden;
    
        }
        
    
        .ref-rank-holder .ranking .rankRow{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 25px;
            transition: 0.5s all ease-in-out;
        }
    
    
        .ref-rank-holder .ranking .rankRow .left{
            display: flex;
            align-items: center;
            height: 30px;
        }
    
        .ref-rank-holder .ranking .rankRow .left img{
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }
    
        .ref-rank-holder .ranking .rankRow .left .other-rank {
            display: inline-flex;
            width: 30px;
            margin-right: 10px;
        }
    
        .ref-rank-holder .ranking .rankRow .left .empty-badge span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            background: url('https://wdb-pub.s3.ap-southeast-1.amazonaws.com/frontend/asset_web/img/new-ui/referral/Referral-Leaderboard.svg?v=8') no-repeat;
            background-size: contain;
            background-position: center;
        }
    
        .ref-rank-holder .ranking .rankRow .left .empty-badge {
            width: 25px;
        }
    
        .ref-rank-holder .ranking .rankRow .right{
            text-align: right;
            color: #FFC04A;
        }
    
        .refRankBox.type2 .rankRow .left, .refRankBox.type2 .rankRow .mid, .refRankBox.type2 .rankRow .right{
            width: calc(100% / 3);
        }
    
        .ref-rank-holder  .refRankBox.type2 .title img{
            width: 20px;
            margin-left: 10px;
        }
    
        .refRankBox.type2 .rankRow .mid{
            text-align: center;
        }
    
        .ref-rank-holder  .refRankBox.type2 .ranking .rankRow{
            padding-top: 25px;
        }
    
        .moveRowTop,
        .moveRowTop1{
            transform: translateY(-60px);
        }
    
        .refInfo .referral-share-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
    
        .refInfo .referral-share-list a {
            margin: 0 5px;
            width: 100%;
            max-width: 32px;
        }
    
        .referralSH .referralSH-content .text-mission{
            color: #FFFFFF;
            font-weight: 500;
            font-size: 24px;
        }
    
        .referralSH .referralSH-content img {
            width: 70px;
        }
    
        .referral-share-button button {
            box-shadow: none;
            border: 0px;
            border-radius: 14px;
            padding: 12px 40px;
            color: #fff;
            background-image: linear-gradient(to bottom, #a45353 0%, #871212 100%);
            font-size: 16px;
            margin-top: 20px;
            font-weight: 500;
            text-transform: uppercase;
        }
    
        #shareReferralModal .referral-share-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
    
        #shareReferralModal .referral-share-list .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: calc(100% / 3 - 10px);
            color: #919191;
        }
    
        #shareReferralModal .referral-share-list .box img {
            max-width: 46px;
        }
    
        .referral-cont .referral_info {
            padding-right: 80px;
        }
    
        .ref-bottom-content {
            background: linear-gradient(140deg ,#3D48AC 0% , #3F1D7C 100%);
            border-radius: 15px;
            margin-top: 15px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px
        }
    
        .ref-bottom-content .ref-bottom-left-content {
            position: relative;
            padding: 20px;
        }
    
        .ref-bottom-content .ref-bottom-left-content img{
            margin-bottom: -40px;
        }
    
        .ref-bottom-content .ref-bottom-right-content {
            line-height: 1.5;
        }
    
        .ref-bottom-left-content .laughing-face {
            width: 3em;
            height: 3em;
            position: absolute;
        }
    
        .ref-bottom-left-content .laughing-face-left{
            top: 25%;
            left: 0%;
            transform: rotate(-27deg);
        }
    
        .ref-bottom-left-content .laughing-face-right{
            top: 5%;
            right: 0%;
            transform: rotate(17deg);
        }
    
        .ref-new-holder .qr_code_holder{
            flex-direction: row;
        }
    
        .ref-new-holder .qr_code_holder button {
            background: transparent;
            border: 1px solid #fff;
            color: #FFFFFF;
            width: 120px;
            border-radius: 20px;
        }
    
        #shareReferralModal .modal-header,
        #shareReferralModal .modal-header-inner{
            min-height: 0;
        }
    
        .box-header:not(.active) .arrow{
            transform: rotate(180deg)
        }
    
        .summary-total-row {
            background: #216474 !important;
            border-bottom: 7px solid #222753;
        }
    
        .summary-grand-total-row {
            background: #113A64 !important;
        }
        
    
        @media only screen and (max-width: 1100px){
    
            .referralSH .referralSH-content {
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
                border-radius: 10px;
                width: 100%;
            }
    
            .ref-new-holder .content .refInfo, .ref-new-holder .content .refStatus{
                width: 100% !important;
            }
    
        }
    
    
        @media only screen and (min-width: 999px) and (max-width: 1450px){
            .referralSH .referralSH-content {
                width: calc(100% / 3 - 10px);
            }
        }
    
        @media only screen and (max-width: 1250px) {
            .referral-banner {
                grid-template-columns: repeat(2, 1fr);
            }
    
            .referral-banner .laughing-face-left {
                top: 35%;
                left: -10%;
            }
        }
    
        @media only screen and (max-width: 1080px) {
            .referral-banner {
                padding: 2%
            }
    
            .referral-banner .laughing-face-left {
                top: 30%;
                left: -10%;
            }
    
            .referral-banner .referral-people {
                margin-bottom: -21%;
            }
        }
    
        @media only screen and (max-width: 1024px) {
            .referral-banner {
                display: flex;
                flex-direction: column;
                margin-top: 30px;
                padding: 20px 10px 0 10px;
                background: linear-gradient(135deg ,#871212 0%, #a45353 100%);
                /*background-position: center;*/
            }
    
            .referral-banner .referral-banner-text {
                width: auto;
            }
    
            .referral-banner .referral-banner-text .referral-banner-title .title-text {
                display: block;
                text-align: center;
                font-size: 25px;
            }
    
            .referral-banner .referral-banner-text .referral-banner-body {
                /*display: none;*/
                text-align: center;
                margin: auto;
            }
    
            .referral-banner .referral-banner-img-wrapper {
                width: 100%;
                max-width: 300px;
                margin: auto;
            }
    
            .referral-banner .laughing-face {
                width: 5em;
                height: 5em;
            }
    
            .referral-banner .laughing-face-left {
                left: -10%;
                top: 40%;
            }
    
            .referral-banner .laughing-face-right {
                right: -8%;
                top: 50%;
            }
    
            .referral-desc-mob {
                display: block;
            }
    
            .referral-desc-mob .referral-desc-body-mob {
                display: flex;
                gap: 5%;
                line-height: 1.5;
            }
    
            .referral-desc-mob .referral-desc-body-mob .banner-info-icons {
                font-size: 16px;
                margin-bottom: 10px;
            }
    
            .referral-desc-mob .referral-desc-body-mob .body-info {
                font-size: clamp(12px, 1.5vw, 16px);
            }
    
            .referral-desc-mob .referral-desc-body-mob .divider {
                font-size: 25px;
                align-self: center;
            }
    
            .referralSH{
                flex-direction: column;
                gap: 15px;
                width: 100%;
            }
    
            /*.referralSH .referralSH-content {
                justify-content: space-between;
                align-items: center;
                flex-direction: row;
                border-radius: 10px;
                width: 100%;
            }*/
    
            .referralSH .referralSH-content .text-mission{
                font-size: 18px;
            }
    
            .ref-main-content-container {
                display: flex;
                flex-direction: column-reverse;
            }
    
            .mob-qr-img {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                gap: 40px;
            }
    
            .downl-ref-qr-img {
                /*width: fit-content;*/
                height: fit-content;
                /*font-size: 18px;*/
                padding: 10px;
                border-radius: 20px;
            }
        }
    
        @media only screen and (max-width: 1099px){
            .ref-rank-holder{
                flex-direction: column;
            }
            .ref-rank-holder .refRankBox{
                width: 100%;
            }
            .ref-rank-holder .refRankBox:nth-child(1){
                margin-bottom: 20px;
            }
        }
    
        @media only screen and (max-width: 800px) {
            .referral-share-button {
                text-align: center;
            }
    
            .referral-btn-holder {
                width: 100%;
                background: none;
                margin-top: 0;
                width: 100%;
                background: none;
                margin-top: 0;
                overflow-x: scroll;
                white-space: nowrap;
                border-radius: 0;
            }
    
            .referral-btn-holder .dashboard-button {
                color: #fff;
                width: auto;
                padding: 10px;
                margin-right: 5px;
                min-width: 100px;
            }
    
            .referral-btn-holder .dashboard-button:last-child {
                margin-right: 0;
            }
    
            .referral-banner {
                padding: 20px 10px;
                transform: scaleX(1.15) scaleY(1.1);
                border-radius: 0 0 40px 40px;
            }
    
            /* .referral-banner .referral-banner-text {
                align-self: unset;
            }
    
            .referral-banner .referral-banner-text .referral-banner-title {
                font-size: 16px;
            }
    
            .referral-banner .referral-banner-text .referral-banner-title .title-text {
                font-size: 16px;
                text-align: left;
            }
    
            .referral-banner .referral-banner-text .referral-banner-body {
                text-align: left;
                margin: unset;
            } */
    
            .referralSH {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }
    
            .referralSH .referralSH-content {
                flex-direction: column;
                text-align: center;
            }
    
            .ref-bottom-content .ref-bottom-left-content {
                display: none;
            }
    
            .ref-new-holder .content .refInfo, .ref-new-holder .content .refStatus{
                width: 100% !important;
                padding: 0 0 20px 0;
            }
    
            .ref-qr-img {
                width: 50%;
            }
    
            .ref-new-holder .qr_code_holder button {
                width: 50%;
            }
    
            .ref-search-submit,
            .ref-search-submit:active,
            .ref-search-submit:focus,
            .ref-search-submit:hover {
                display: block !important;
                margin: 30px auto;
                min-width: 150px;
                border-radius: 10px;
            }
        }
    
        @media only screen and (max-width: 500px) {
            .referral-desc-mob .referral-desc-body-mob .body-info {
                font-size: 11px;
            }
        }
    
        @media only screen and (max-width: 400px) {
            .referral-banner .laughing-face-left {
                left: -3%;
            }
    
            .referral-banner .laughing-face-right {
                right: -5%;
            }
        }