/* start withdraw process */
#approved-modal {
      opacity: 1;
      /* display: flex !important; */
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      backdrop-filter: blur(5px);
}

#approved-modal .modal-dialog {
      max-width: 680px;
      width: 90%;
      margin: 0 auto;
      transform: scale(0.8);
      transition: all 0.3s ease;
}

[data-pages="deposit"] {
      .modal-backdrop.fade.show {
            display: none !important;
      }
}

#approved-modal.show .modal-dialog {
      /* transform: scale(1); */
      opacity: 1;
}

#approved-modal .modal-content {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      position: relative;
}

#approved-modal .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--light-orange), var(--teal));
}

#approved-modal .modal-header {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 20px 25px 15px;
      position: relative;
}

#approved-modal .modal-title {
      color: #fff;
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0;
      text-align: center;
      flex: 1;
}

#approved-modal .pop-close1 {
      position: absolute;
      top: 15px;
      right: 20px;
      background: rgba(255, 255, 255, 0.1) !important;
      border: none;
      color: #fff !important;
      font-weight: bold;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
}

#approved-modal .pop-close1:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      transform: scale(1.1);
}

#approved-modal .modal-body {
      padding: 25px;
      background: transparent;
}

#approved-modal .sign-in-modal__page {
      background: transparent;
}

#approved-modal .sign-in-page__body {
      background: transparent;
}

#approved-modal #tran_data {
      text-align: center;
      padding: 20px 15px;
      color: #fff !important;
      font-size: 20px;
      line-height: 1.6;
      margin: 0;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animation for modal appearance */
@keyframes modalFadeIn {
      0% {
            opacity: 0;
            transform: scale(0.8) translateY(-50px);
      }

      100% {
            opacity: 1;
            transform: scale(1) translateY(0);
      }
}

#approved-modal.show {
      animation: modalFadeIn 0.3s ease-out;
}

/* Focus states for accessibility */
#approved-modal .pop-close1:focus {
      outline: 2px solid var(--light-orange);
      outline-offset: 2px;
}

#approved-modal .modal-content:focus-within {
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 165, 0, 0.3);
}

/* end withdraw process */

.center-side {
      display: none;
}

.center-contant.fr,
.main-container {
      max-width: 100%;
      margin: 0 auto;
      border-radius: 15px;
      padding: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      background: var(--secondary-color);
}

.center-contant.fr .center-tab,
.main-container .tabs {
      display: flex;
      margin-bottom: 30px;
      justify-content: center;
}

.center-contant.fr .center-tab a,
.main-container .tab {
      padding: 15px 30px;
      background: transparent;
      border: none;
      color: #FFF;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
}

.center-contant.fr .center-tab a:hover,
.center-contant.fr .center-tab a.active,
.main-container .tab:hover,
.main-container .tab.active {
      color: var(--light-orange);
}

.center-contant.fr .center-tab a.active::after,
.main-container .tab.active::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--light-orange);
}

/* Bank Selection */
.content-deposit-container {
      padding: 5px;
}

.deposit-container .bank-options {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
      grid-gap: 20px;
      margin-bottom: 20px;
}

.deposit-container .bank-option {
      display: flex;
      justify-content: center;
      text-align: center;
      align-items: center;
      gap: 10px;
      padding: 5px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--blue-teal);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
}

.deposit-container .bank-option.active-im {
      border-color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
}

#modal-qrCode {
      border: 1px solid var(--blue-teal);
      width: 235px;
      position: relative;
      height: auto;
}

.depo-form-input {
      height: 0;
      opacity: 0;
      transition: all .5s ease-in-out;
      transform-origin: left top;
      transform: scaleY(0);
}

.depo-form-input.active {
      height: auto;
      opacity: 1;
      transform: scaleY(1);
}

.depo-form-input.anime-fade-in {
      animation: anime-fade-in 0.5s ease-in-out;
}

.deposit-container .bank-logo {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
}

.deposit-container .bank-name {
      font-weight: 600;
      color: #ffffff;
}

/* Form Styles */
.deposit-container .form-group {
      margin-bottom: 25px;
}

.deposit-container .form-label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #cccccc;
      font-size: 16px;
}

.deposit-container .form-input {
      width: 100%;
      height: 48px;
      padding: 10px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px !important;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
}

.deposit-container .form-input:focus {
      outline: none;
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.15);
}

.deposit-container .input-group {
      position: relative;
      display: flex;
      align-items: center;
}

.deposit-container .copy-btn {
      position: absolute;
      right: 10px;
      background: none;
      border: none;
      color: var(--light-orange);
      cursor: pointer;
      padding: 5px;
      font-size: 18px;
}

/* Amount Buttons */
.deposit-container .amount-buttons {
      display: flex;
      gap: 10px;
      margin-top: 10px;
}

.deposit-container .amount-btn {
      padding: 10px 30px;
      height: 48px;
      background: var(--teal);
      border: 1px solid var(--blue-teal);
      border-radius: 6px;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
      font-weight: 600;
}

.deposit-container .amount-btn.selected {
      background: var(--light-orange);
      border-color: var(--light-orange);
}

/* Promotion Button */
.deposit-container .promotion-btn {
      font-weight: 600;
      width: 100%;
      padding: 10px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      height: 48px;
}

.deposit-container .promotion-btn .promos-selected {
      display: flex;
      gap: 10px;
}

.deposit-container .promotion-btn .promos-selected .check_promo {
      width: 20px;
      height: auto;
}



.deposit-container .promotion-btn:hover {
      background: rgba(255, 255, 255, 0.15);
}

/* File Upload */
.deposit-container .file-upload {
      border: 2px dashed var(--blue-teal);
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: var(--teal-light);
}

.deposit-container .image-preview {
      position: relative;
      margin-top: 20px;
      text-align: center;
}

.deposit-container .image-preview img {
      max-width: 100%;
      max-height: 200px;
      border-radius: 8px;
      border: 2px solid var(--blue-teal);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.deposit-container .image-preview .remove-image {
      position: absolute;
      top: 5px;
      right: 5px;
      background: #ff4444;
      color: white;
      border: none;
      border-radius: 50%;
      width: 25px;
      height: 25px;
      cursor: pointer;
      font-size: 12px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.deposit-container .file-upload:hover {
      border-color: var(--light-orange);
      background: var(--teal-light);
}

.deposit-container .upload-icon {
      font-size: 48px;
      color: #666;
      margin-bottom: 15px;
}

.deposit-container .upload-text {
      color: #cccccc;
      margin-bottom: 10px;
}

.deposit-container .upload-text .browse {
      color: #4a9eff;
      text-decoration: underline;
      cursor: pointer;
}

/* Submit Button */
.deposit-container .submit-btn {
      width: 100%;
      padding: 10px;
      background: var(--lg-btn);
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      height: 48px;
}

.deposit-container .submit-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

/* Bank Type Title Styles */
.bank-type-title {
      margin: 20px 0 15px 0;
      padding: 0;
      position: relative;
}

.bank-type-title h3 {
      color: var(--light-orange);
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      padding: 0;
      text-transform: capitalize;
      letter-spacing: 0.5px;
      position: relative;
      display: inline-block;
}

.bank-type-title h3::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, var(--light-orange) 0%, transparent 100%);
}

/* Promotion Modal Styles */
.deposit-container .depo-promo-pop {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 9999;
      backdrop-filter: blur(5px);
}

.deposit-container .depo-promo-pop.anime-fade-in {
      animation: anime-fade-in 0.3s ease-in-out;
}

.deposit-container .promo-modal-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #1a1a1a;
      border-radius: 15px;
      width: 90%;
      max-width: 500px;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      border: 1px solid #333;
}

.deposit-container .promo-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 25px;
      border-bottom: 1px solid #333;
      background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.deposit-container .promo-modal-header h2 {
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      margin: 0;
      text-align: center;
      flex: 1;
}

.deposit-container .promo-modal-close {
      background: none;
      border: none;
      color: #ffffff;
      font-size: 24px;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s ease;
}

.deposit-container .promo-modal-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ff6b35;
}

.deposit-container .promo-modal-body {
      padding: 0;
      max-height: 30vh;
      overflow-y: auto;
}

.deposit-container .promotion-list {
      padding: 0;
      border-bottom: 1px solid #333;
}

.deposit-container .promo-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 25px;
      transition: all 0.3s ease;
      cursor: pointer;
}

.deposit-container .promo-item:hover {
      background: rgba(255, 255, 255, 0.05);
}

.deposit-container .promotion-list:last-child {
      border-bottom: none;
}

.deposit-container .promo-item-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
}

.deposit-container .promo-name {
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.4;
}

.deposit-container .promo-details-link {
      color: #4a9eff;
      font-size: 14px;
      text-decoration: none;
      transition: color 0.3s ease;
      font-weight: 600;
}

.deposit-container .promo-details-link:hover {
      color: #ff6b35;
      text-decoration: underline;
}

.deposit-container .promo-radio {
      display: flex;
      align-items: center;
      margin-left: 15px;
}

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

.deposit-container .promo-radio label {
      width: 20px;
      height: 20px;
      border: 2px solid #666;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      transition: all 0.3s ease;
      background: transparent;
}

.deposit-container .promo-radio input[type="radio"]:checked+label {
      border-color: #ff6b35;
      background: #ff6b35;
}

.deposit-container .promo-radio input[type="radio"]:checked+label::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      background: #ffffff;
      border-radius: 50%;
}

.deposit-container .promo-modal-footer {
      padding: 20px 25px;
      border-top: 1px solid #333;
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      text-align: center;
}

.deposit-container .promo-confirm-btn {
      background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 120px;
}

.deposit-container .promo-confirm-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
}

/* Scrollbar styling for modal */
.deposit-container .promo-modal-body::-webkit-scrollbar {
      width: 6px;
}

.deposit-container .promo-modal-body::-webkit-scrollbar-track {
      background: #333;
      border-radius: 3px;
}

.deposit-container .promo-modal-body::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 3px;
}

.deposit-container .promo-modal-body::-webkit-scrollbar-thumb:hover {
      background: #888;
}

/* Data Table Styles list */
.center-table {
      width: 100%;
      margin: 20px 0;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--blue-teal);
}

.dataTables_wrapper {
      width: 100%;
      padding: 0;
}

.dataTable {
      width: 100%;
      border-collapse: collapse;
      background: transparent;
      margin: 0;
}

.dataTable thead {
      background: linear-gradient(135deg, var(--blue-teal) 0%, #1a4a5a 100%);
}

.dataTable thead th {
      padding: 15px 12px;
      text-align: left;
      color: #ffffff;
      font-weight: 600;
      font-size: 14px;
      border: none;
      position: relative;
      cursor: pointer;
      transition: all 0.3s ease;
}

.dataTable thead th:hover {
      background: rgba(255, 255, 255, 0.1);
      color: var(--light-orange);
}

.dataTable thead th.sorting_asc,
.dataTable thead th.sorting_desc {
      color: var(--light-orange);
}

.dataTable thead th.sorting_asc::after {
      content: ' ▲';
      color: var(--light-orange);
      font-size: 12px;
}

.dataTable thead th.sorting_desc::after {
      content: ' ▼';
      color: var(--light-orange);
      font-size: 12px;
}

.dataTable tbody {
      background: transparent;
}

.dataTable tbody tr {
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dataTable tbody tr:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateX(5px);
}

.dataTable tbody tr.odd {
      background: rgba(255, 255, 255, 0.02);
}

.dataTable tbody tr.even {
      background: transparent;
}

.dataTable tbody td {
      padding: 15px 12px;
      color: #cccccc;
      font-size: 14px;
      border: none;
      vertical-align: middle;
}

.dataTable tbody td.sorting_1 {
      color: var(--light-orange);
      font-weight: 600;
}

/* Status styling */
.dataTable tbody td:nth-child(5) {
      font-weight: 600;
}

.dataTable tbody td:nth-child(5):contains("Submitting") {
      color: #ffa726;
}

.dataTable tbody td:nth-child(5):contains("Finish") {
      color: #4caf50;
}

.dataTable tbody td:nth-child(5):contains("Be Closed") {
      color: #f44336;
}

/* Receipt link styling */
.dataTable tbody td a {
      color: var(--light-orange);
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
}

.dataTable tbody td a:hover {
      color: #ffffff;
      text-decoration: underline;
}

/* Pagination Styles */
.dataTables_paginate {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px;
      background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
      border-top: 1px solid #333;
}

.paginate_button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 35px;
      width: 35px;
      height: 35px;
      margin: 0 3px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid #444;
      border-radius: 6px;
      color: #cccccc;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
}

.paginate_button:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: var(--light-orange);
      color: var(--light-orange);
      transform: translateY(-1px);
}

.paginate_button.current {
      background: var(--light-orange);
      border-color: var(--light-orange);
      color: #ffffff;
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.paginate_button.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: rgba(255, 255, 255, 0.05);
      border-color: #333;
}

.paginate_button.disabled:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: #333;
      color: #666;
      transform: none;
}

/* Animation for table rows */
@keyframes fadeInRow {
      from {
            opacity: 0;
            transform: translateY(10px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.dataTable tbody tr {
      animation: fadeInRow 0.3s ease-in-out;
}

/* Custom scrollbar for table wrapper */
.dataTables_wrapper::-webkit-scrollbar {
      height: 6px;
}

.dataTables_wrapper::-webkit-scrollbar-track {
      background: #333;
      border-radius: 3px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb {
      background: #666;
      border-radius: 3px;
}

.dataTables_wrapper::-webkit-scrollbar-thumb:hover {
      background: #888;
}

/* end Data Table Styles list */

/* No Data State Styling */
.center-table table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;
      margin: 0;
}

.center-table thead {
      background: linear-gradient(135deg, var(--blue-teal) 0%, #1a4a5a 100%);
}

.center-table thead th {
      padding: 15px 12px;
      text-align: left;
      color: #ffffff;
      font-weight: 600;
      font-size: 14px;
      border: none;
      position: relative;
      transition: all 0.3s ease;
}

.center-table thead th.w70 {
      width: 70px;
}

.center-table tbody {
      background: transparent;
}

.center-table tbody tr {
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.center-table tbody tr:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateX(5px);
}

.center-table tbody tr.odd {
      background: rgba(255, 255, 255, 0.02);
}

.center-table tbody tr.even {
      background: transparent;
}

.center-table tbody td {
      padding: 15px 12px;
      color: #cccccc;
      font-size: 14px;
      border: none;
      vertical-align: middle;
}

/* No Data Message Styling */
.center-table tbody tr td[colspan] {
      text-align: center;
      padding: 20px;
      color: #888888;
      font-size: 16px;
      font-weight: 500;
      font-style: italic;
      background: rgba(255, 255, 255, 0.02);
      /* border: 2px dashed rgba(255, 255, 255, 0.1); */
      border-radius: 8px;
      margin: 20px;
      position: relative;
}

.center-table tbody tr td[colspan]:before {
      content: "📋";
      display: block;
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.5;
}

.center-table tbody tr td[colspan]:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--light-orange) 50%, transparent 100%);
      opacity: 0.3;
}

@keyframes noDataPulse {

      0%,
      100% {
            opacity: 0.5;
            transform: scale(1);
      }

      50% {
            opacity: 0.8;
            transform: scale(1.02);
      }
}

.center-table tbody tr td[colspan] {
      animation: noDataPulse 3s ease-in-out infinite;
}


/* Withdraw Form Styles */
.center-form.withdraw {
      max-width: 100%;
      margin: 0 auto;
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--blue-teal);
}

.center-form.withdraw form {
      display: flex;
      flex-direction: column;
      gap: 20px;
}

.center-form.withdraw label {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
}

.center-form.withdraw label span {
      min-width: 190px;
      font-weight: 600;
      color: #cccccc;
      font-size: 16px;
      display: flex;
      align-items: center;
}

.center-form.withdraw .center-form-select {
      flex: 1;
      position: relative;
}

.center-form.withdraw select {
      width: 100%;
      height: 48px;
      padding: 10px 15px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      -webkit-appearance: none !important;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 15px center;
      background-size: 16px;
      padding-right: 45px;
}

.center-form.withdraw select:focus {
      outline: none;
      border-color: var(--light-orange);
      background-color: rgba(255, 255, 255, 0.15);
}

.center-form.withdraw select:hover {
      border-color: var(--light-orange);
      background-color: rgba(255, 255, 255, 0.1);
}

/* Dropdown options styling */
.center-form.withdraw select option {
      background-color: #ffffff;
      color: #333333;
      font-size: 16px;
      font-weight: 500;
      padding: 12px 15px;
      border: none;
      transition: all 0.3s ease;
}

.center-form.withdraw select option:hover {
      background-color: var(--light-orange);
      color: #ffffff;
}

.center-form.withdraw select option:checked {
      background-color: var(--blue-teal);
      color: #ffffff;
      font-weight: 600;
}

.center-form.withdraw select option:focus {
      background-color: var(--light-orange);
      color: #ffffff;
}

.center-form.withdraw input[type="text"],
.center-form.withdraw input[type="number"],
.center-form.withdraw input[type="password"],
.center-form.withdraw input[type="file"] {
      flex: 1;
      height: 48px;
      padding: 10px 15px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
}

.center-form.withdraw input[type="text"]:focus,
.center-form.withdraw input[type="number"]:focus,
.center-form.withdraw input[type="password"]:focus,
.center-form.withdraw input[type="file"]:focus {
      outline: none;
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.15);
}

.center-form.withdraw input[type="text"]:hover,
.center-form.withdraw input[type="number"]:hover,
.center-form.withdraw input[type="password"]:hover,
.center-form.withdraw input[type="file"]:hover {
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.1);
}

.center-form.withdraw input[type="text"]::placeholder {
      color: #888888;
      font-weight: 400;
}

.center-form.withdraw input[type="file"] {
      padding: 8px 15px;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.1);
}

.center-form.withdraw input[type="file"]::-webkit-file-upload-button {
      background: var(--light-orange);
      color: white;
      border: none;
      padding: 6px 15px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      margin-left: 5px;
      margin-top: 5px;
      transition: all 0.3s ease;
}

.center-form.withdraw input[type="file"]::-webkit-file-upload-button:hover {
      background: #ff8c42;
      transform: translateY(-1px);
}

.center-form.withdraw input[type="hidden"] {
      display: none;
}

.center-form.withdraw .err_div {
      position: absolute;
      bottom: -20px;
      left: 205px;
      color: #ff6b35;
      font-size: 12px;
      font-weight: 600;
}

.center-form.withdraw #mem_url_qr {
      border-radius: 8px;
      border: 2px solid var(--blue-teal);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
}

.center-form.withdraw #mem_url_qr:hover {
      transform: scale(1.02);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.center-form.withdraw .btn.gradient.center-submit {
      background: var(--lg-btn);
      color: white;
      border: none;
      border-radius: 10px;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 120px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
}

.center-form.withdraw .btn.gradient.center-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
      background: var(--lg-btn);
}

.center-form.withdraw .btn.gradient.center-submit:active {
      transform: translateY(0);
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

/* Animation for form elements */
.center-form.withdraw label {
      animation: fadeInUp 0.5s ease-in-out;
}

.center-form.withdraw label:nth-child(1) {
      animation-delay: 0.1s;
}

.center-form.withdraw label:nth-child(2) {
      animation-delay: 0.2s;
}

.center-form.withdraw label:nth-child(3) {
      animation-delay: 0.3s;
}

.center-form.withdraw label:nth-child(4) {
      animation-delay: 0.4s;
}

.center-form.withdraw label:nth-child(5) {
      animation-delay: 0.5s;
}

@keyframes fadeInUp {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

/* Focus states for accessibility */
.center-form.withdraw select:focus,
.center-form.withdraw input[type="text"]:focus,
.center-form.withdraw input[type="number"]:focus,
.center-form.withdraw input[type="password"]:focus,
.center-form.withdraw input[type="file"]:focus {
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

/* Disabled state styling */
.center-form.withdraw select:disabled,
.center-form.withdraw input[type="text"]:disabled,
.center-form.withdraw input[type="number"]:disabled,
.center-form.withdraw input[type="password"]:disabled,
.center-form.withdraw input[type="file"]:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: rgba(255, 255, 255, 0.05);
}

/* Error state styling */
.center-form.withdraw input.error,
.center-form.withdraw select.error {
      border-color: #ff4444;
      background: rgba(255, 68, 68, 0.1);
}

.center-form.withdraw input.error:focus,
.center-form.withdraw select.error:focus {
      border-color: #ff4444;
      box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2);
}

/* Success state styling */
.center-form.withdraw input.success,
.center-form.withdraw select.success {
      border-color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
}

.center-form.withdraw input.success:focus,
.center-form.withdraw select.success:focus {
      border-color: #4CAF50;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* end withdraw */

/* Verification Code Styles */
.fr-otp {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
}

.fr-otp .code {
      flex: 1;
      height: 48px;
      padding: 10px 15px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      letter-spacing: 2px;
      text-align: center;
}

.fr-otp .code:focus {
      outline: none;
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.fr-otp .code:hover {
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.1);
}

.fr-otp .code::placeholder {
      color: #888888;
      font-weight: 400;
      letter-spacing: normal;
}

.fr-otp .btn.gradient.otp {
      background: var(--lg-btn);
      color: #ffffff;
      border: none;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 300px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
}

.fr-otp .btn.gradient.otp:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4);
      background: linear-gradient(135deg, #ff8c42 0%, var(--light-orange) 100%);
}

.fr-otp .btn.gradient.otp:active {
      transform: translateY(0);
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

.fr-otp .btn.gradient.otp a {
      color: #ffffff;
      text-decoration: none;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
}

.fr-otp .btn.gradient.otp a:hover {
      color: #ffffff;
      text-decoration: none;
}

/* Disabled state for OTP button */
.fr-otp .btn.gradient.otp:disabled,
.fr-otp .btn.gradient.otp.disabled {
      opacity: 0.6;
      cursor: not-allowed;
      background: rgba(255, 255, 255, 0.1);
      transform: none;
      box-shadow: none;
}

.fr-otp .btn.gradient.otp:disabled:hover,
.fr-otp .btn.gradient.otp.disabled:hover {
      transform: none;
      box-shadow: none;
      background: rgba(255, 255, 255, 0.1);
}

/* Error state for verification code */
.fr-otp .code.error {
      border-color: #ff4444;
      background: rgba(255, 68, 68, 0.1);
}

.fr-otp .code.error:focus {
      border-color: #ff4444;
      box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2);
}

/* Success state for verification code */
.fr-otp .code.success {
      border-color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
}

.fr-otp .code.success:focus {
      border-color: #4CAF50;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* Error message styling for verification code */
#check_captcha.err_div {
      position: absolute;
      bottom: -20px;
      left: 205px;
      color: #ff6b35;
      font-size: 12px;
      font-weight: 600;
      margin-top: 5px;
}

/* Animation for verification code input */
.fr-otp .code {
      animation: fadeInUp 0.5s ease-in-out;
}

@keyframes codeShake {

      0%,
      100% {
            transform: translateX(0);
      }

      25% {
            transform: translateX(-5px);
      }

      75% {
            transform: translateX(5px);
      }
}

.fr-otp .code.error {
      animation: codeShake 0.5s ease-in-out;
}


/* Loading state for OTP button */
.fr-otp .btn.gradient.otp.loading {
      position: relative;
      color: transparent;
}

.fr-otp .btn.gradient.otp.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
}

@keyframes spin {
      to {
            transform: translate(-50%, -50%) rotate(360deg);
      }
}

/* Focus states for accessibility */
.fr-otp .code:focus,
.fr-otp .btn.gradient.otp:focus {
      outline: none;
}

.fr-otp .btn.gradient.otp:focus {
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
}

/* Verification code container styling */
label:has(.fr-otp) {
      position: relative;
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
}

label:has(.fr-otp) span {
      min-width: 190px;
      font-weight: 600;
      color: #cccccc;
      font-size: 16px;
      display: flex;
      align-items: center;
}

/* Withdrawal Interface Styles - Dark Theme */
.withdrawal-container .amount-section {
      margin-bottom: 30px;
      padding: 25px;
      background: var(--teal);
      border-radius: 12px;
      border: 1px solid var(--blue-teal);
}

.withdrawal-container .amount-input {
      width: 100%;
      height: 48px;
      padding: 15px 20px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20px;
      transition: all 0.3s ease;
}

.withdrawal-container .amount-input:focus {
      outline: none;
      border-color: #ff6b35;
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

.withdrawal-container .amount-details {
      display: flex;
      flex-direction: column;
}

.withdrawal-container .amount-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.withdrawal-container .amount-row:last-child {
      border-bottom: none;
      font-weight: 600;
      font-size: 18px;
      color: #ff6b35;
}

.withdrawal-container .amount-label {
      color: #cccccc;
      font-size: 16px;
      font-weight: 500;
}

.withdrawal-container .amount-value {
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
}

/* Progress Bar */
.withdrawal-container .progress-bar {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      margin: 15px 0;
      overflow: hidden;
}

.withdrawal-container .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff6b35 0%, #ff8c42 100%);
      border-radius: 2px;
      width: 0%;
      transition: width 0.3s ease;
}

/* Quick Amount Buttons */
.withdrawal-container .quick-amounts {
      margin: 25px 0;
}

.withdrawal-container .amount-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
}

.withdrawal-container .amount-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      border-color: #ff6b35;
      transform: translateY(-2px);
}

.withdrawal-container .amount-btn.selected {
      background: #ff6b35;
      border-color: #ff6b35;
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

/* Security Notice */
.withdrawal-container .security-notice {
      background: rgba(255, 107, 53, 0.1);
      border: 1px solid rgba(255, 107, 53, 0.3);
      border-radius: 8px;
      padding: 15px;
      margin: 20px 0;
      color: #ff6b35;
      font-size: 14px;
      text-align: center;
      font-weight: 500;
}

/* Bank Account Section */
.withdrawal-container .bank-section {
      margin: 30px 0;
}

.withdrawal-container .section-title {
      color: #ffffff;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
}

.withdrawal-container .bank-accounts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
}

.withdrawal-container .bank-account-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: var(--teal);
      border: 1px solid var(--blue-teal);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      height: 150px;
      border-bottom: 25px solid var(--blue-teal);
}

.withdrawal-container .bank-account-card:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: #666;
}

.withdrawal-container .bank-account-card.active-im {
      border-color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

/* .withdrawal-container .bank-account-card.selected::before {
      content: '✓';
      position: absolute;
      top: 10px;
      right: 10px;
      background: #4CAF50;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
} */

.withdrawal-container .bank-logo {
      width: 60px;
      height: 60px;
      background: #4CAF50;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
      font-size: 18px;
}

.withdrawal-container .bank-info {
      flex: 1;
}

.withdrawal-container .bank-holder {
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
}

.withdrawal-container .bank-number {
      color: #cccccc;
      font-size: 14px;
      font-weight: 500;
}

.withdrawal-container .bank-type {
      border-radius: 6px;
      text-transform: uppercase;
      border: 1px solid var(--blue-teal);
      height: 80px;
}

.withdrawal-container .add-bank-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 30px;
      border: 2px dashed var(--blue-teal);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #cccccc;
      height: 150px;
}

.withdrawal-container .add-bank-card:hover {
      border-color: #ff6b35;
      background: rgba(255, 107, 53, 0.05);
      color: #ff6b35;
}

.withdrawal-container .add-bank-icon {
      font-size: 32px;
      margin-bottom: 10px;
      font-weight: bold;
}

.withdrawal-container .add-bank-text {
      font-size: 16px;
      font-weight: 600;
}

/* Turnover Section */
.withdrawal-container .turnover-section {
      margin: 30px 0;
      padding: 25px;
      background: var(--teal);
      border-radius: 12px;
      border: 1px solid var(--blue-teal);
}

.withdrawal-container .turnover-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
}

.withdrawal-container .refresh-turnover-btn span {
      font-size: 24px;
      font-weight: 600;
}

.withdrawal-container .refresh-turnover-btn {
      background: #ff6b35;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 48px;
}

.withdrawal-container .refresh-turnover-btn:hover {
      background: #ff8c42;
      transform: translateY(-1px);
}

.withdrawal-container .turnover-progress {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      margin: 15px 0;
      overflow: hidden;
}

.withdrawal-container .turnover-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff6b35 0%, #ff8c42 100%);
      border-radius: 4px;
      width: 0%;
      transition: width 0.3s ease;
}

.withdrawal-container .turnover-details {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
}

.withdrawal-container .turnover-item {
      text-align: center;
}

.withdrawal-container .turnover-label {
      color: #cccccc;
      font-size: 14px;
      margin-bottom: 5px;
}

.withdrawal-container .turnover-value {
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
}

/* Submit Button */

.withdrawal-container .submit-btn {
      width: 100%;
      height: 48px;
      background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
      border: none;
      border-radius: 10px;
      color: white;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
}

.withdrawal-container .submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
      background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 100%);
}

.withdrawal-container .submit-btn:active {
      transform: translateY(-1px);
      box-shadow: 0 5px 20px rgba(255, 107, 53, 0.3);
}


.withdrawal-container .amount-section,
.withdrawal-container .bank-section,
.withdrawal-container .turnover-section {
      animation: fadeInUp 0.5s ease-in-out;
}

.withdrawal-container .amount-section {
      animation-delay: 0.1s;
}

.withdrawal-container .bank-section {
      animation-delay: 0.2s;
}

.withdrawal-container .turnover-section {
      animation-delay: 0.3s;
}

.withdrawal-container .submit-section {
      animation: fadeInUp 0.5s ease-in-out 0.4s both;
}

/* Focus states for accessibility */
.withdrawal-container .amount-input:focus,
.withdrawal-container .amount-btn:focus,
.withdrawal-container .bank-account-card:focus,
.withdrawal-container .refresh-turnover-btn:focus,
.withdrawal-container .submit-btn:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3);
}

.withdrawal-container .submit-btn.loading {
      position: relative;
      color: transparent;
}

.withdrawal-container .submit-btn.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border: 3px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
}

@keyframes spin {
      to {
            transform: translate(-50%, -50%) rotate(360deg);
      }
}

body .pagination.page {
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 15px 20px;
      border-radius: 10px;
      margin: 20px auto;
      max-width: fit-content;
}

.pagination.page a {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 8px 12px;
      background: #3a3a3a;
      border: 1px solid #444;
      border-radius: 20px;
      color: #cccccc;
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
}

.pagination.page a:hover {
      background: #4a4a4a;
      border-color: #666;
      color: #ffffff;
      transform: translateY(-1px);
}

.pagination.page a.page_active {
      background: #f4ef58 !important;
      border-color: #f4ef58 !important;
      color: #a94614 !important;
      font-weight: 700;
      box-shadow: 0 0 20px rgba(244, 239, 88, 0.4);
      position: relative;
}

.pagination.page a.page_active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 8px;
      background: radial-gradient(ellipse, rgba(244, 239, 88, 0.3) 0%, transparent 70%);
      border-radius: 50%;
      filter: blur(2px);
}

.pagination.page a.page_active:hover {
      background: #f4ef58 !important;
      border-color: #f4ef58 !important;
      color: #a94614 !important;
      transform: translateY(-1px);
      box-shadow: 0 0 25px rgba(244, 239, 88, 0.5);
}

/* Disabled state for navigation buttons */
.pagination.page a[href="#"] {
      opacity: 0.6;
      cursor: not-allowed;
      background: #2a2a2a;
      border-color: #333;
      color: #666;
}

.pagination.page a[href="#"]:hover {
      background: #2a2a2a;
      border-color: #333;
      color: #666;
      transform: none;
}

/* Navigation arrows styling */
.pagination.page a[id*="first"],
.pagination.page a[id*="previous"],
.pagination.page a[id*="next"],
.pagination.page a[id*="last"] {
      font-weight: 700;
      font-size: 12px;
}

/* Animation for page transitions */
@keyframes pageGlow {

      0%,
      100% {
            box-shadow: 0 0 20px rgba(244, 239, 88, 0.4);
      }

      50% {
            box-shadow: 0 0 30px rgba(244, 239, 88, 0.6);
      }
}

.pagination.page a.page_active {
      animation: pageGlow 2s ease-in-out infinite;
}

/* Refresh Icon Rotation Animation */
.bi-arrow-clockwise {
      transition: transform 0.6s ease-in-out;
      cursor: pointer;
}

.bi-arrow-clockwise:hover {
      transform: rotate(180deg);
}

.bi-arrow-clockwise.rotate360 {
      animation: rotate360 0.8s ease-in-out;
}

@keyframes rotate360 {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

.bi-arrow-clockwise:active {
      animation: rotate360 0.8s ease-in-out;
}

/* center style */
.profile-container {
      max-width: 1300px;
      margin: 0 auto;
      background: var(--card-bg);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      border: 1px solid var(--border-color);
      background: var(--secondary-color);
}

.center-container {
      display: none;
}

[data-pages="center"] .center-container {
      display: block;
}

.profile-container-inner {
      margin: 20px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--blue-teal);
}

.main_rew,
.center-contant.fr .center-title,
.profile-container .profile-title {
      margin: 1.5rem 0;
      color: #fff;
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-align: center;
      position: relative;
}

.main_rew .tit_rew,
.center-contant.fr .center-title h3,
.profile-container .profile-title h2 {
      position: relative;
      display: inline-block;
      margin-bottom: 0;
      padding-bottom: 8px;
}

.main_rew .tit_rew:after,
.center-contant.fr .center-title h3:after,
.profile-container .profile-title h2:after {
      content: "";
      display: block;
      width: 230px;
      height: 4px;
      margin: 0 auto;
      margin-top: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(58, 78, 113, 0.00) 0%, #224F9E 51%, rgba(58, 78, 113, 0.00) 100%);
}

.profile-container .user-info {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 25px 20px;
      background: rgba(255, 255, 255, 0.02);
      border-bottom: 1px solid var(--border-color);
}

.profile-container .user-avatar span {
      background: url(../images/gaming/icon/avatar.png) no-repeat center center;
      background-size: cover;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      margin: 0 auto;
}

.profile-container .user-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: white;
      box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.profile-container .user-details {
      flex: 1;
}

.profile-container .username {
      font-size: 20px;
      font-weight: 600;
      color: var(--white);
      margin-bottom: 8px;
}

.profile-container .balance-info {
      display: flex;
      align-items: center;
      gap: 8px;
}

.profile-container .balance-label {
      color: var(--white);
      font-size: 16px;
      font-weight: 500;
}

.profile-container .balance-amount {
      color: var(--orange);
      font-size: 18px;
      font-weight: 700;
}

.profile-container .menu-list {
      padding: 0;
}

.profile-container .menu-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      height: 52px;
}

.profile-container .menu-item:last-child {
      border-bottom: none;
}

.profile-container .menu-item:hover {
      background: var(--teal-light);
      /* transform: translateX(5px); */
}

.profile-container .menu-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      font-size: 18px;
      color: white;
      transition: all 0.3s ease;
}

.profile-container .menu-item:hover .menu-icon {
      background: var(--blue-teal);
      transform: scale(1.1);
}

.profile-container .menu-text {
      flex: 1;
      font-size: 16px;
      color: var(--white);
}

.profile-container .menu-arrow {
      color: var(--white);
      font-size: 16px;
      transition: all 0.3s ease;
}

.profile-container .menu-item:hover .menu-arrow {
      color: var(--orange);
      transform: translateX(5px);
}

/* Specific icon colors for different menu items */
.profile-container .menu-item .menu-icon {
      background: var(--teal);
}


.profile-container .menu-item {
      animation: fadeInUp 0.5s ease-in-out;
}

.profile-container .menu-item:nth-child(1) {
      animation-delay: 0.1s;
}

.profile-container .menu-item:nth-child(2) {
      animation-delay: 0.2s;
}

.profile-container .menu-item:nth-child(3) {
      animation-delay: 0.3s;
}

.profile-container .menu-item:nth-child(4) {
      animation-delay: 0.4s;
}

.profile-container .menu-item:nth-child(5) {
      animation-delay: 0.5s;
}

.profile-container .menu-item:nth-child(6) {
      animation-delay: 0.6s;
}

.profile-container .menu-item:nth-child(7) {
      animation-delay: 0.7s;
}

.profile-container .menu-item:nth-child(8) {
      animation-delay: 0.8s;
}

.profile-container .menu-item:nth-child(9) {
      animation-delay: 0.9s;
}

.profile-container .menu-item:nth-child(10) {
      animation-delay: 1.0s;
}

.profile-container .menu-item:nth-child(11) {
      animation-delay: 1.1s;
}

.profile-container .menu-item:nth-child(12) {
      animation-delay: 1.2s;
}

.profile-container .menu-item:nth-child(13) {
      animation-delay: 1.3s;
}

.profile-container .menu-item:nth-child(14) {
      animation-delay: 1.4s;
}

.profile-container .menu-item:nth-child(15) {
      animation-delay: 1.5s;
}

.profile-container .menu-item:nth-child(16) {
      animation-delay: 1.6s;
}

.profile-container .menu-item:focus {
      outline: none;
}

.profile-container .menu-item:focus .menu-icon {
      background: var(--accent-orange);
}

.profile-container .menu-item:focus .menu-arrow {
      color: var(--accent-orange);
}

/* end center style  */

/* profile detail style */
.profile-container .profile-detail {
      padding: 20px;
}

.profile-container .person-circle.img-circle-1 {
      background-image: url(../images/gaming/icon/user-1.png);
}

.profile-container .person-circle.img-circle-2 {
      background-image: url(../images/gaming/icon/user-2.png);
}

.profile-container .person-circle.img-circle-3 {
      background-image: url(../images/gaming/icon/user-3.png);
      width: 250px;
      height: 250px;
}

.profile-container .person-circle {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 150px;
      height: 150px;
      display: block;
      /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
      border-radius: 10px;
      flex-shrink: 0;
      margin: 20px 20px 0 0
}

.profile-container .info-row .info-icon {
      font-size: 24px;
      color: var(--white);
}

.profile-container .person-circle:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
}


.profile-container .dashboard-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;
}

.profile-container .dashboard-grid .banking-details {
      grid-column: 1 / -1;
      grid-row: 2;
}

.profile-container .dashboard-card {
      background: var(--main-color);
      border-radius: 15px;
      padding: 25px;
      backdrop-filter: blur(10px);
      border: 1px solid var(--blue-teal);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
}

.profile-container .dashboard-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      border-color: rgba(255, 255, 255, 0.3);
}

.profile-container .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      position: relative;
}

.profile-container .card-header h3 {
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      text-align: center;
      flex: 1;
}

.profile-container .info-box {
      width: 70%;
}

.profile-container .card-content {
      display: flex;
      flex-direction: row;
      gap: 15px;
      position: relative;
      justify-content: space-between;
      align-items: center;
}

/* Style for cards with images */
.profile-container .dashboard-card.personal-details .card-content {
      padding-top: 10px;
}

.profile-container .dashboard-card.personal-details .info-row {
      margin-left: 0;
      padding-left: 0;
}

.profile-container .info-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-container .info-row:last-child {
      border-bottom: none;
}

.profile-container .info-icon {
      font-size: 16px;
      opacity: 0.7;
      min-width: 20px;
}

.profile-container .info-label {
      color: #b0b0b0;
      font-size: 16px;
      font-weight: 500;
      min-width: 200px;
}

.profile-container .info-value {
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      flex: 1;
}

.profile-container .edit-btn,
.profile-container .copy-btn {
      background: none;
      border: none;
      color: #4a90e2;
      font-size: 16px;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
      opacity: 0.7;
}

.profile-container .edit-btn:hover,
.profile-container .copy-btn:hover {
      opacity: 1;
      transform: scale(1.1);
}

.profile-container .dashboard-buttons {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-top: 30px;
}

.profile-container .dashboard-btn {
      padding: 15px 30px;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      min-width: 180px;
}

.profile-container .referral-btn {
      background: linear-gradient(135deg, #4a90e2, #357abd);
      color: white;
      box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.profile-container .referral-btn:hover {
      background: linear-gradient(135deg, #357abd, #2c5aa0);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.profile-container .bonus-btn {
      background: linear-gradient(135deg, #2c5aa0, #1e3a6b);
      color: white;
      box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
}

.profile-container .bonus-btn:hover {
      background: linear-gradient(135deg, #1e3a6b, #152a4f);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4);
}

/* Animation for cards */
.profile-container .dashboard-card {
      animation: fadeInUp 0.6s ease-out;
}

.profile-container .dashboard-card:nth-child(1) {
      animation-delay: 0.1s;
}

.profile-container .dashboard-card:nth-child(2) {
      animation-delay: 0.2s;
}

.profile-container .dashboard-card:nth-child(3) {
      animation-delay: 0.3s;
}

.profile-container .dashboard-buttons {
      animation: fadeInUp 0.6s ease-out;
      animation-delay: 0.4s;
      animation-fill-mode: both;
}

/* phone modal style */
.modify-phone-modal .modal-content {
      position: relative;
      background-color: #fff;
      border-radius: 0.3rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      border: 1px solid var(--blue-teal);
      backdrop-filter: blur(10px);
}

.modify-phone-modal .modal-dialog {
      margin: 1.75rem auto;
      max-width: 500px;
}

.modify-phone-modal .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: 1px solid #dee2e6;
}

.modify-phone-modal .modal-body {
      padding: 1rem;
}

.modify-phone-modal .close:hover {
      opacity: 0.75;
}

.modify-phone-modal .close {
      background: none;
      border: none;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1;
      color: #000;
      opacity: 0.5;
      cursor: pointer;
}

.modify-phone-modal .form-group {
      margin-bottom: 1rem;
}

.modify-phone-modal .input-group-text.txt-icon {
      border-radius: 5px 0 0 5px !important;
      border-right: 0 !important;
}

.modify-phone-modal .input-group-text.txt-icon-phone {
      border-radius: 0 !important;
      border-right: 0 !important;
      height: 38px;
}

.modify-phone-modal .intl-tel-input .flag-dropdown {
      position: unset !important;
}

.modify-phone-modal .intl-tel-input .flag-dropdown .selected-flag {
      margin: 10px !important;
}

.modify-phone-modal .input-group-text {
      background-color: #f8f9fa;
      border: 1px solid #ced4da;
      color: #495057;
}

/* end profile detail style */

/* Password Change Interface Styles */
.password-change-container {
      margin: 20px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--blue-teal);
}

.password-change-container .password-change-content {
      display: flex;
      width: 100%;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
}

.password-change-container .password-illustration {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 40px;
      position: relative;
      background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
}

.password-illustration img {
      width: 65%;
}

.password-change-container .password-form {
      flex: 1;
      padding: 60px 50px;
      background: var(--main-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
}

.password-change-container .password-form h2 {
      color: #ffffff;
      font-size: 28px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 40px;
      letter-spacing: 1px;
}

.password-change-container .password-change-form {
      display: flex;
      flex-direction: column;
      gap: 30px;
}

.password-change-container .form-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
}

.password-change-container .form-group label {
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
}

.password-change-container .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background: #1a1a2e;
      border: 1px solid #4a4a6a;
      border-radius: 12px;
      transition: all 0.3s ease;
      height: 48px;
}

.password-change-container .input-wrapper:focus-within {
      border-color: #4a9eff;
      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}

.password-change-container .input-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      color: #ffffff;
      font-size: 18px;
}

.password-change-container .password-input {
      flex: 1;
      height: 48px;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      padding: 0 15px;
      outline: none;
      letter-spacing: 2px;
}

.password-change-container .password-input::placeholder {
      color: #888888;
      font-weight: 400;
      letter-spacing: normal;
}

.password-change-container .toggle-password {
      background: none;
      border: none;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer;
      padding: 10px;
      border-radius: 10px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      position: relative;
      overflow: hidden;
}

.password-change-container .toggle-password:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.05);
      color: #4a9eff;
}

.password-change-container .toggle-password:active {
      transform: scale(0.95);
}

.password-change-container .toggle-password:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.3);
}

.password-change-container .eye-icon {
      transition: all 0.3s ease;
      font-size: 16px;
}

.password-change-container .toggle-password:hover .eye-icon {
      color: #4a9eff;
      transform: scale(1.1);
}

.password-change-container .toggle-password.password-visible .eye-icon {
      color: #4a9eff;
}

.password-change-container .toggle-password.password-visible {
      background: rgba(74, 158, 255, 0.1);
      border: 1px solid rgba(74, 158, 255, 0.3);
}

.password-change-container .toggle-password:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      background: rgba(255, 255, 255, 0.05);
}

.password-change-container .toggle-password:disabled:hover {
      transform: none;
      background: rgba(255, 255, 255, 0.05);
      color: #ffffff;
}

@keyframes eyeBlink {

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

      50% {
            transform: scale(0.8);
      }
}

.password-change-container .toggle-password:active .eye-icon {
      animation: eyeBlink 0.2s ease-in-out;
}

.password-change-container .toggle-password::before {
      content: attr(title);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 1000;
}

.password-change-container .toggle-password:hover::before {
      opacity: 1;
}

.password-change-container .submit-btn {
      width: 100%;
      height: 48px;
      background: linear-gradient(135deg, #4a9eff 0%, #357abd 100%);
      border: none;
      border-radius: 12px;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 20px;
      box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
}

.password-change-container .submit-btn:hover {
      background: linear-gradient(135deg, #357abd 0%, #2c5aa0 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(74, 158, 255, 0.4);
}

.password-change-container .submit-btn:active {
      transform: translateY(0);
      box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
}

.password-change-container .form-group {
      animation: fadeInUp 0.5s ease-in-out;
}

.password-change-container .form-group:nth-child(1) {
      animation-delay: 0.1s;
}

.password-change-container .form-group:nth-child(2) {
      animation-delay: 0.2s;
}

.password-change-container .form-group:nth-child(3) {
      animation-delay: 0.3s;
}

.password-change-container .submit-btn {
      animation: fadeInUp 0.5s ease-in-out 0.4s both;
}


.password-change-container .password-input:focus,
.password-change-container .toggle-password:focus,
.password-change-container .submit-btn:focus {
      outline: none;
}

.password-change-container .submit-btn:focus {
      box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.3);
}


.password-change-container .submit-btn.loading {
      position: relative;
      color: transparent;
}

.password-change-container .submit-btn.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      border: 3px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
}

.password-change-container .input-wrapper.error {
      border-color: #ff4444;
      background: rgba(255, 68, 68, 0.1);
}

.password-change-container .input-wrapper.error:focus-within {
      border-color: #ff4444;
      box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.2);
}

.password-change-container .input-wrapper.success {
      border-color: #4CAF50;
      background: rgba(76, 175, 80, 0.1);
}

.password-change-container .input-wrapper.success:focus-within {
      border-color: #4CAF50;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

/* end change password page style */

/* transfer page style */

.transfer-container .fund-container {
      margin: 10px;
}

.transfer-container .account-section {
      margin-bottom: 20px;
}

.transfer-container .account-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
}

.transfer-container .account-item {
      background: var(--teal);
      border-radius: 10px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
}

.transfer-container .account-item:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 193, 87, 0.3);
}

.transfer-container .account-item.main-account {
      background: var(--teal);
}

.transfer-container .account-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.transfer-container .account-name {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
}

.transfer-container .balance-container {
      flex: 1;
      max-width: 250px;
      margin-left: 20px;
      gap: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
}

.transfer-container .balance-input {
      width: 100%;
      padding: 10px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      outline: none;
      transition: all 0.3s ease;
      height: 40px;
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
}

.transfer-container .balance-input:focus {
      border-color: #ffc557;
      box-shadow: 0 0 10px rgba(255, 193, 87, 0.3);
}

.transfer-container .main-balance {
      background: #FFF;
      color: var(--orange);
}

.transfer-container .account-details {
      display: flex;
      gap: 15px;
      margin-top: 10px;
}

.transfer-container .detail-item {
      font-size: 16px;
      color: #cccccc;
      background: rgba(255, 255, 255, 0.05);
      padding: 10px;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      text-align: center;
      align-items: center;
      display: flex;
      height: 40px;
      white-space: nowrap;
}

/* Transfer Section */
.transfer-container .account-section {
      background: var(--main-color);
      border-radius: 10px;
      padding: 20px;
      border: 1px solid var(--blue-teal);
}

.transfer-container .transfer-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
}

.transfer-container .form-row {
      display: flex;
      gap: 20px;
}

.transfer-container .form-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
}

.transfer-container .form-group label {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.transfer-container .form-select,
.transfer-container .form-input {
      padding: 12px 15px;
      background: var(--teal);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      outline: none;
      transition: all 0.3s ease;
      height: 48px;
}

.transfer-container .form-select {
      cursor: pointer;
      -webkit-appearance: none !important;
      -moz-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 15px center;
      background-size: 16px;
      padding-right: 45px;
}

.transfer-container .form-select option {
      background: var(--teal);
      color: #ffffff;
}

.transfer-container .form-select:hover {
      border-color: #ffc557;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.transfer-container .form-select:focus {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc557' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");

}

.transfer-container .form-select:focus,
.transfer-container .form-input:focus {
      border-color: #ffc557;
      box-shadow: 0 0 10px rgba(255, 193, 87, 0.3);
}

.transfer-container .submit-buttons {
      display: flex;
      gap: 15px;
      margin-top: 10px;
}

.transfer-container .btn {
      flex: 1;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      height: 48px;
}

.transfer-container .btn-blue {
      background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
      color: #ffffff;
      box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.transfer-container .btn-blue:hover {
      background: linear-gradient(135deg, #357abd 0%, #2d5f8a 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.transfer-container .btn-orange {
      background: linear-gradient(135deg, #ffc557 0%, #ff8f34 100%);
      color: #1a1a2e;
      box-shadow: 0 4px 15px rgba(255, 193, 87, 0.3);
}

.transfer-container .btn-orange:hover {
      background: linear-gradient(135deg, #ff8f34 0%, #ff6b1a 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 193, 87, 0.4);
}

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

      50% {
            transform: scale(1.05);
      }

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

.transfer-container .balance-updated {
      animation: balanceUpdate 0.5s ease-in-out;
}

.transfer-container .loading {
      opacity: 0.7;
      pointer-events: none;
}

.transfer-container .loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid #ffc557;
      border-top: 2px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* end transfer page style */

.center-select.bet_record_list {
      display: flex;
      justify-content: center;
      width: 100%;
}

.center-select.bet_record_list select:focus {
      outline: none;
}

.center-select.bet_record_list select {
      height: 48px;
      width: 800px;
      border: 1px solid var(--blue-teal);
      background: var(--main-color);
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      border-radius: 5px;
      transition: all 0.3s ease;
      padding: 10px;
}

.s_search .sform .sdate_input {
      margin: 10px 0;
      color: #fff;
}

.s_search .sform .s_right {
      display: unset !important;
      float: unset !important;
}

body .s_search .sform .center-select {
      width: 100% !important;
}

[data-pages="bet_statements"] {
      .arcticmodal-overlay {
            display: none !important;
      }

      .center-table {
            margin: unset !important;
            border: unset !important;
      }
}

.s_search {
      background: var(--main-color);
      border: 1px solid var(--blue-teal);
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.s_search form {
      margin: 0;
}

.s_search .sdate_input {
      flex: 1;
      min-width: 49.8%;
}

.s_search .sdate_input label {
      display: block;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.s_search .sdate_input:first-child {
      width: 100%;
}

.s_search .sdate_input:last-child {
      display: flex;
      justify-content: center;
}

.s_search .sdate_input input[type="text"] {
      width: 100% !important;
      height: 48px;
      padding: 8px 12px;
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      transition: all 0.3s ease;
      text-indent: 5px;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 30px;
      padding-right: 40px;
}

.s_search .sdate_input input[type="text"]:focus {
      outline: none;
      border-color: var(--light-orange);
      box-shadow: 0 0 0 3px rgba(240, 120, 87, 0.1);
      background: rgba(255, 255, 255, 0.1);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 30px;
}

.s_search .sdate_input input[type="text"]:hover {
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.08);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23fff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 30px;
}

.s_search .sdate_input input[type="text"]::placeholder {
      color: rgba(255, 255, 255, 0.6);
}

/* Statement Select Styles */
.s_search .center-select.s_statement {
      position: relative;
      width: 100%;
}

body .s_search .center-select.s_statement select {
      width: 100%;
      height: 48px;
      padding: 8px 12px !important;
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
      padding-right: 40px;
}

.s_search .center-select.s_statement select:focus {
      outline: none;
      border-color: var(--light-orange);
      box-shadow: 0 0 0 3px rgba(240, 120, 87, 0.1);
      background: rgba(255, 255, 255, 0.1);
}

.s_search .center-select.s_statement select:hover {
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.08);
}

.s_search .center-select.s_statement select option {
      background: var(--main-color);
      color: #fff;
      padding: 8px 12px;
      border: none;
}

.s_search .center-select.s_statement select option:hover {
      background: var(--light-orange);
      color: var(--main-color);
}

.s_search .center-select.s_statement select optgroup {
      background: var(--main-color);
      color: var(--light-orange);
      font-weight: 600;
      padding: 8px 12px;
}

.s_search .s_right {
      display: flex;
      flex-direction: column;
      gap: 15px;
      min-width: 300px;
}

.s_search .q_date {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
}

.s_search .q_date .q {
      flex: 1;
      min-width: 80px;
}

.s_search .q_date .q a {
      height: 48px;
      display: block;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--blue-teal);
      border-radius: 6px;
      color: #fff;
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      transition: all 0.3s ease;
      cursor: pointer;
}

.s_search .q_date .q a:hover {
      background: rgba(240, 120, 87, 0.1);
      border-color: var(--light-orange);
      color: var(--light-orange);
      transform: translateY(-1px);
}

.s_search .q_date .q a.active {
      background: var(--light-orange);
      border-color: var(--light-orange);
      color: var(--main-color);
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(240, 120, 87, 0.3);
}

body .s_search .btn.gradient.center-submit {
      background: var(--lg-btn);
      border: none;
      border-radius: 8px;
      color: var(--main-color);
      font-size: 16px;
      font-weight: 600;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(240, 120, 87, 0.3);
      margin: unset !important;
      height: 48px !important;
      width: 50% !important;
}

.s_search .btn.gradient.center-submit:hover {
      background: var(--lg-btn);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(240, 120, 87, 0.4);
}

.s_search .btn.gradient.center-submit:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(240, 120, 87, 0.3);
}

.s_search .btn.gradient.center-submit:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(240, 120, 87, 0.2);
}

.s_search .sdate_input input[type="text"],
.s_search .center-select.s_statement select,
.s_search .q_date .q a,
.s_search .btn.gradient.center-submit {
      animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.s_search .btn.gradient.center-submit.loading {
      position: relative;
      color: transparent;
}

.s_search .btn.gradient.center-submit.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border: 2px solid var(--main-color);
      border-top: 2px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

.s_search .sdate_input input[type="text"].error,
.s_search .center-select.s_statement select.error {
      border-color: #ff4757;
      box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.s_search .sdate_input input[type="text"].error:focus,
.s_search .center-select.s_statement select.error:focus {
      border-color: #ff4757;
      box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.2);
}

.s_search .sdate_input input[type="text"].success,
.s_search .center-select.s_statement select.success {
      border-color: #2ed573;
      box-shadow: 0 0 0 3px rgba(46, 213, 115, 0.1);
}

.s_search .sdate_input input[type="text"].success:focus,
.s_search .center-select.s_statement select.success:focus {
      border-color: #2ed573;
      box-shadow: 0 0 0 3px rgba(46, 213, 115, 0.2);
}

.s_search .sdate_input input[type="text"]:disabled,
.s_search .center-select.s_statement select:disabled,
.s_search .btn.gradient.center-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      pointer-events: none;
}

.s_search .btn.gradient.center-submit:disabled:hover {
      transform: none;
      box-shadow: 0 2px 8px rgba(240, 120, 87, 0.3);
}

.s_search .sdate_input input[type="text"]:focus,
.s_search .center-select.s_statement select:focus,
.s_search .q_date .q a:focus,
.s_search .btn.gradient.center-submit:focus {
      outline: none;
}

.s_search .sdate_input:hover input[type="text"],
.s_search .center-select.s_statement:hover select {
      border-color: var(--light-orange);
}

.s_search .center-select.s_statement select::-webkit-scrollbar {
      width: 8px;
}

.s_search .center-select.s_statement select::-webkit-scrollbar-track {
      background: var(--main-color);
      border-radius: 4px;
}

.s_search .center-select.s_statement select::-webkit-scrollbar-thumb {
      background: var(--blue-teal);
      border-radius: 4px;
}

.s_search .center-select.s_statement select::-webkit-scrollbar-thumb:hover {
      background: var(--light-orange);
}

/* end statment page style */

/* Referral/Affiliate Form Styles */
.depositfr.dps {
      background: var(--main-color);
      border-radius: 12px;
      padding: 20px;
      position: relative;
      border: 1px solid var(--blue-teal);
}

.depositfr.dps .arcticmodal-overlay {
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      z-index: 999;
}

.depositfr.dps .loading_gift {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
}

.depositfr.dps .spinnerLoad {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
}

.depositfr.dps .spinnerLoad div {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--main-color);
      animation: bounce 1.4s ease-in-out infinite both;
}

.depositfr.dps .spinnerLoad .bounce1 {
      animation-delay: -0.32s;
}

.depositfr.dps .spinnerLoad .bounce2 {
      animation-delay: -0.16s;
}

@keyframes bounce {

      0%,
      80%,
      100% {
            transform: scale(0);
      }

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

/* Referral Link and Code Inputs */
.depositfr.dps .ref_link_name,
.depositfr.dps .ref_code_name {
      position: relative;
      margin-bottom: 15px;
}

.depositfr.dps .col-12 p {
      margin-bottom: 10px !important;
}

.depositfr.dps .ref_link_name input,
.depositfr.dps .ref_code_name input {
      width: 100%;
      height: 48px !important;
      padding: 12px 45px 12px 15px;
      background: var(--teal);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #fff;
      transition: all 0.3s ease;
}

.depositfr.dps .ref_link_name input:focus,
.depositfr.dps .ref_code_name input:focus {
      outline: none;
      border-color: var(--main-color);
      box-shadow: 0 0 0 3px rgba(240, 120, 87, 0.1);
}

.depositfr.dps .ref_link_name svg,
.depositfr.dps .ref_code_name svg {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
      transition: all 0.3s ease;
      width: 24px;
      height: 24px;
}

.depositfr.dps .ref_link_name svg:hover,
.depositfr.dps .ref_code_name svg:hover {
      transform: translateY(-50%) scale(1.1);
}

.depositfr.dps .ref_link_name svg path,
.depositfr.dps .ref_code_name svg path {
      fill: #fff;
}

/* Separator */
.depositfr.dps .separator {
      display: flex;
      align-items: center;
      margin: 20px 0 15px;
      color: #fff;
      text-align: center;
}

.depositfr.dps .separator:before,
.depositfr.dps .separator:after {
      content: "";
      flex: 1;
      border-bottom: 1px solid var(--light-purple);
}

.depositfr.dps .separator:not(:empty):before {
      margin-right: 0.65em;
}

.depositfr.dps .separator:not(:empty):after {
      margin-left: 0.65em;
}

.depositfr.dps .social-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      margin-bottom: 20px;
}

.depositfr.dps .social-container a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
}

.depositfr.dps .social-container a:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.depositfr.dps .social-container img {
      width: 80px;
      height: 80px;
}

.depositfr.dps .btn.gradient.center-submit.submit_all {
      width: 50%;
      padding: 12px 24px;
      background: var(--lg-btn);
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 20px 0;
      height: 48px;
      margin-left: 25% !important;
}

.depositfr.dps .btn.gradient.center-submit.submit_all:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(240, 120, 87, 0.4);
}

.depositfr.dps .btn.gradient.center-submit.submit_all:active {
      transform: translateY(0);
}

.depositfr.dps .affiliate-header {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin: 25px 0 15px;
}

.depositfr.dps .overview-container {
      background: var(--bg-color);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
}

.depositfr.dps .overview-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
}

.depositfr.dps .overview-subcontainer {
      background: var(--teal);
      border-radius: 6px;
      flex: 1;
      min-width: 120px;
      padding: 12px;
      text-align: center;
      display: flex;
      justify-content: space-between;
      height: 48px;
      border: 1px solid var(--blue-teal);
}

.depositfr.dps .overview-text {
      margin-bottom: 8px;
      color: #fff;
      opacity: 0.8;
      font-size: 16px !important;
}

.depositfr.dps .overview-value {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: var(--orange) !important;
}

.depositfr.dps .overview-container-2 {
      background: var(--out-line-background-primary-2);
      border-radius: 8px;
      padding: 0;
}

.depositfr.dps .report-item {
      background: var(--teal);
      border-radius: 8px;
      color: #fff;
      cursor: pointer;
      line-height: 50px;
      padding: 0 15px;
      position: relative;
      width: 100%;
      margin-bottom: 10px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      text-decoration: none;
      border: 1px solid var(--blue-teal);
      height: 48px;
      font-size: 16px !important;
}

.depositfr.dps .report-item:last-child {
      margin-bottom: 0;
}

.depositfr.dps .report-item:hover {
      background: var(--out-line-background-primary-2);
      transform: translateX(5px);
}

.depositfr.dps .report-item svg:first-child {
      margin-right: 15px;
      width: 20px;
      height: 20px;
}

.depositfr.dps .report-item .chevron-icon {
      position: absolute;
      right: 15px;
      width: 16px;
      height: 16px;
      color: #fff;
}

.depositfr.dps .gradient-outline-primary {
      position: relative;
      background: var(--teal);
      border-radius: 8px;
}

.depositfr.dps .gradient-outline-primary:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, var(--secondary-1), var(--secondary-2));
      border-radius: 8px;
      padding: 1.5px;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
}

/* end update bonus list style */

/* Rewards Grid Layout */
.rewards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100% !important;
      overflow: unset !important;
}

.rewards li {
      list-style: none;
      margin: 0 !important;
      padding: 0 !important;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;
}

.rewards li:nth-child(1) {
      animation-delay: 0.1s;
}

.rewards li:nth-child(2) {
      animation-delay: 0.2s;
}

.rewards li:nth-child(3) {
      animation-delay: 0.3s;
}

.rewards li:nth-child(4) {
      animation-delay: 0.4s;
}

.rewards li:nth-child(5) {
      animation-delay: 0.5s;
}

.rewards li:nth-child(6) {
      animation-delay: 0.6s;
}

.rewards li:nth-child(7) {
      animation-delay: 0.7s;
}

.rewards li:nth-child(8) {
      animation-delay: 0.8s;
}

.rewards li a {
      display: block;
      text-decoration: none;
      background-size: 100% 100% !important;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.rewards li a:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.rewards .rewards-cont {
      position: relative;
      height: 100%;
      padding: 25px !important;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      z-index: 2;
}

.rewards .rewards-cont em {
      display: block !important;
      width: 48px !important;
      height: 48px !important;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
}

.rewards .rewards-cont h5 {
      color: #ffffff;
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      text-align: left;
      line-height: 1.2;
      z-index: 3;
      position: relative;
}

.rew2::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 120px;
      height: 120px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="30" y="30" width="40" height="40" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="50" r="8" fill="rgba(255,255,255,0.2)"/></svg>') no-repeat;
      background-size: contain;
      opacity: 0.3;
      z-index: 1;
}

.rewards .rew1 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-1.png');
}

.rewards .rew2 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-2.png');
}

.rewards .rew3 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-3.png');
}

.rewards .rew4 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-4.png');
}

.rewards .rew5 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-5.png');
}

.rewards .rew6 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-6.png');
}

.rewards .rew7 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-7.png');
}

.rewards .rew8 .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-9.png');
}

.rewards .depo-bonus-open .rewards-cont em {
      background-image: url('../images/gaming/icon/rewards-8.png') !important;
}

.rewards li a:hover .rewards-cont h5 {
      transform: scale(1.05);
      transition: transform 0.3s ease;
}

.rewards li a:hover em {
      transform: scale(1.1) rotate(5deg);
      transition: transform 0.3s ease;
}

/* gif style  */

#gift-main {
      max-width: 1300px !important;
      margin: 10px 0 0 0 !important;
}

.gift_leftmenu {
      background: #ffffff;
      border-radius: 15px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      padding: 20px;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 0, 0, 0.05);
}

.gift_leftmenu:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
}

.gift_leftmenu h3 {
      background: var(--teal) !important;
      color: #ffffff;
      padding: 15px 20px;
      margin: 0 0 15px 0;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 600;
      text-align: center !important;
      position: relative;
      overflow: hidden;
}

.gift_leftmenu h3::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
}

.gift_leftmenu h3:hover::before {
      left: 100%;
}

.gift_leftmenu ul {
      list-style: none;
      padding: 0;
      margin: 0;
}

.gift_leftmenu ul li {
      margin-bottom: 8px;
      border-radius: 8px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      padding: 0 !important;
      line-height: 18px !important;
}

.gift_leftmenu ul li:last-child {
      margin-bottom: 0;
}

.gift_leftmenu ul li a {
      display: block;
      padding: 12px 20px;
      color: #333333;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      position: relative;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid var(--blue-teal);
}

.gift_leftmenu ul li a:hover {
      background: var(--teal);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border-radius: 2px;
}

.gift_leftmenu ul li a.active {
      background: var(--teal);
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      font-weight: 600;
}

.gift_leftmenu ul li a.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: #ffffff;
      border-radius: 0 2px 2px 0;
}

/* Point display styling */
.gift_leftmenu ul li[style*="padding: 10px"] {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
      padding: 15px !important;
      text-align: center;
      position: relative;
}


.gift_leftmenu ul li[style*="padding: 10px"] span {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: #333333;
}

.gift_leftmenu ul li[style*="padding: 10px"] a {
      display: inline-block;
      padding: 6px 12px;
      background: var(--teal);
      color: #ffffff;
      text-decoration: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
      margin-top: 5px;
}

.gift_leftmenu ul li[style*="padding: 10px"] a:hover {
      background: #1a8f7a;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Point number styling */
#member_point_show {
      font-size: 24px !important;
      font-weight: 700 !important;
      color: #ff2d00 !important;
      text-shadow: 0 2px 4px rgba(255, 45, 0, 0.2);
      display: block;
      margin-bottom: 8px;
      padding: 8px 12px !important;
      background: rgba(255, 45, 0, 0.1);
      border-radius: 8px;
      border: 2px solid rgba(255, 45, 0, 0.2);
}

/* Animation for menu items */
@keyframes slideInLeft {
      from {
            opacity: 0;
            transform: translateX(-20px);
      }

      to {
            opacity: 1;
            transform: translateX(0);
      }
}

.gift_leftmenu ul li {
      animation: slideInLeft 0.3s ease forwards;
}

.gift_leftmenu ul li:nth-child(1) {
      animation-delay: 0.1s;
}

.gift_leftmenu ul li:nth-child(2) {
      animation-delay: 0.2s;
}

.gift_leftmenu ul li:nth-child(3) {
      animation-delay: 0.3s;
}

.gift_leftmenu ul li:nth-child(4) {
      animation-delay: 0.4s;
}

.gift_leftmenu ul li:nth-child(5) {
      animation-delay: 0.5s;
}

.gift_leftmenu ul li:nth-child(6) {
      animation-delay: 0.6s;
}

.gift_leftmenu ul li:nth-child(7) {
      animation-delay: 0.7s;
}

.gift_leftmenu ul li a:focus {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
      background: var(--teal);
      color: #ffffff;
}

.gift_leftmenu ul li[style*="padding: 10px"]:has(#member_point_show:empty)::after {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid var(--teal);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 8px;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* Wheel of Fortune Styles */
#left {
      width: 82.3% !important
}

body .content-wrapper #gift-main .left-table {
      width: 81.5% !important;
      padding: 20px !important;
      position: relative;
      text-align: center;
      background: var(--main-color) !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      min-height: 500px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
}

.content-wrapper #gift-main .left-table>* {
      position: relative;
      z-index: 2;
}

.content-wrapper #gift-main .head-text {
      color: #ffffff !important;
      font-size: 32px !important;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      margin-bottom: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
      from {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.3);
      }

      to {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.6);
      }
}

.content-wrapper #gift-main .left-table h5 {
      color: #ffffff !important;
      font-size: 18px !important;
      font-weight: 500;
      margin-bottom: 15px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      line-height: 1.4;
}

.content-wrapper #gift-main .left-table span {
      color: #ffffff !important;
      font-size: 18px !important;
      font-weight: 600;
      margin-bottom: 20px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.content-wrapper #gift-main .num-spin {
      color: #ffd700;
      font-weight: 700;
      font-size: 24px;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

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

      50% {
            transform: scale(1.1);
      }
}

.content-wrapper #gift-main .wheel_div {
      position: relative;
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
      padding: 20px;
}

.content-wrapper #gift-main .wheel_container {
      position: relative;
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
}

.content-wrapper #gift-main .turnplate {
      position: relative;
      width: 400px;
      height: 400px;
      background-image: url(/content/design2/images/gift/855test/wheel_spin_855test.png) !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      border-radius: 50%;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
      transition: transform 0.1s ease;
}

.content-wrapper #gift-main .turnplate:hover {
      transform: scale(1.02);
      box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

.wheel_container .turnplate img.pointer {
      width: 27% !important;
      height: 37% !important;
      left: 36.6% !important;
      top: 26.5% !important;
      z-index: 1;
}

/* .content-wrapper #gift-main .wheel-item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 1;
} */

@keyframes bounce {

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

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

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

/* Spinning animation */
.content-wrapper #gift-main .turnplate.spinning {
      animation: spin 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(1440deg);
            /* 4 full rotations */
      }
}

/* Disabled state */
.content-wrapper #gift-main .spintxt.disabled {
      background: linear-gradient(135deg, #6c757d, #495057);
      cursor: not-allowed;
      opacity: 0.7;
      box-shadow: none;
}

.content-wrapper #gift-main .spintxt.disabled:hover {
      transform: translate(-50%, -50%);
      box-shadow: none;
}

/* Loading state */
.content-wrapper #gift-main .spintxt.loading {
      background: linear-gradient(135deg, #28a745, #20c997);
      animation: pulse 1s ease-in-out infinite;
}

.content-wrapper #gift-main .spintxt.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid transparent;
      border-top: 2px solid #ffffff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

.content-wrapper #gift-main .turnplate.success {
      animation: successSpin 2s ease-in-out;
}

@keyframes successSpin {
      0% {
            transform: rotate(0deg);
      }

      25% {
            transform: rotate(90deg);
      }

      50% {
            transform: rotate(180deg);
      }

      75% {
            transform: rotate(270deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* Error state */
.spintxt {
      font-size: 37px !important;
      z-index: 2
}

.content-wrapper #gift-main .spintxt.error {
      background: linear-gradient(135deg, #dc3545, #c82333);
      animation: shake 0.5s ease-in-out;
}

@keyframes shake {

      0%,
      100% {
            transform: translate(-50%, -50%);
      }

      25% {
            transform: translate(-52%, -50%);
      }

      75% {
            transform: translate(-48%, -50%);
      }
}

.content-wrapper #gift-main .spintxt:focus {
      outline: 3px solid rgba(255, 255, 255, 0.5);
      outline-offset: 2px;
}

.content-wrapper #gift-main .control_table {
      width: 100%;
      border: none;
      border-collapse: collapse;
      margin-bottom: 20px;
      background: transparent;
}

.content-wrapper #gift-main .control_table tbody tr td {
      /* padding-bottom: 15px; */
      border: none;
      vertical-align: middle;
}

.content-wrapper #gift-main .control_table input[type="text"] {
      padding: 10px 15px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 14px;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
}

.content-wrapper #gift-main .control_table input[type="text"]:focus {
      outline: none;
      border-color: var(--light-orange);
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.3);
      background: rgba(255, 255, 255, 0.15);
}

.content-wrapper #gift-main .control_table input[type="text"]:hover {
      border-color: rgba(255, 255, 255, 0.4);
      background: rgba(255, 255, 255, 0.12);
}

.control_table input[type="text"]::placeholder {
      color: rgba(255, 255, 255, 0.6);
}

.ui-datepicker-trigger {
      width: 20px;
      height: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      filter: brightness(0.8);
}

.ui-datepicker-trigger:hover {
      filter: brightness(1.2);
      transform: scale(1.1);
}

body .content-wrapper #gift-main .control_table tbody tr td div {
      color: #fff !important;
}

.content-wrapper #gift-main #txtDateFrom,
.content-wrapper #gift-main #txtDateTo,
.content-wrapper #gift-main #txtClaimId {
      height: 40px !important;
      margin: 0 10px 10px 0 !important;
      width: 200px !important;
      text-align: center !important;
}

.content-wrapper #gift-main .button1 {
      border: none;
      border-radius: 8px;
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
      color: #fff;
      height: 40px !important;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      margin: 2px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      vertical-align: unset !important;
}

.content-wrapper #gift-main .button1:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, var(--light-orange), var(--blue-teal));
}

.content-wrapper #gift-main .button1:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.content-wrapper #gift-main #divLoading {
      width: 100% !important;
      text-align: center !important;
}


@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

.content-wrapper #gift-main .main_table {
      width: 100%;
      border: none;
      border-collapse: collapse;
      margin: 20px 0;
      background: transparent;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.content-wrapper #gift-main .main_table thead {
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
}

.content-wrapper #gift-main .main_table_header th {
      padding: 5px 10px;
      text-align: center;
      color: #fff !important;
      font-weight: 600;
      font-size: 14px;
      border: none;
      white-space: nowrap;
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.content-wrapper #gift-main .main_table tbody {
      background: rgba(255, 255, 255, 0.05);
}

.content-wrapper #gift-main .main_table tbody tr {
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.content-wrapper #gift-main .main_table tbody tr:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.01);
}

.content-wrapper #gift-main .main_table_odd {
      background: rgba(255, 255, 255, 0.03);
}

.content-wrapper #gift-main .main_table_even {
      background: rgba(255, 255, 255, 0.07);
}

.content-wrapper #gift-main .main_table tbody td {
      padding: 5px 10px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      border: none;
      vertical-align: middle;
}

.content-wrapper #gift-main #tblFooter {
      width: 100%;
      border: none;
      border-collapse: collapse;
      margin: 0 !important;
      background: transparent;
}

.content-wrapper #gift-main #tblFooter tbody tr td {
      padding: 15px;
      text-align: center;
      border: none;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
}

.content-wrapper #gift-main .link1 {
      color: var(--light-orange);
      text-decoration: none;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 5px;
      transition: all 0.3s ease;
      margin: 0 5px;
}

.content-wrapper #gift-main .link1:hover {
      color: #fff;
      background: rgba(255, 165, 0, 0.2);
      text-decoration: none;
}

.content-wrapper #gift-main .input2 {
      padding: 5px 10px;
      border: 2px solid rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 12px;
      text-align: center;
      transition: all 0.3s ease;
      width: 40px;
}

.content-wrapper #gift-main .input2:focus {
      outline: none;
      border-color: var(--light-orange);
      box-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
}

.content-wrapper #gift-main .input2:hover {
      border-color: rgba(255, 255, 255, 0.4);
}

.content-wrapper #gift-main input[type="hidden"] {
      display: none;
}

.content-wrapper #gift-main .main_table tbody tr {
      animation: fadeInRow 0.5s ease-in-out;
}

.content-wrapper #gift-main .main_table tbody tr:last-child {
      background: linear-gradient(135deg, rgba(255, 165, 0, 0.2), rgba(0, 150, 136, 0.2));
      font-weight: bold;
      border-top: 2px solid var(--light-orange);
}

.content-wrapper #gift-main .main_table tbody tr:last-child td {
      color: var(--light-orange);
      font-size: 14px;
}

.content-wrapper #gift-main .main_table_header {
      height: 40px !important;
}

.content-wrapper #gift-main .main_table td:hover,
.content-wrapper #gift-main .main_table tr:hover {
      background: rgba(255, 255, 255, 0.1) !important;
}

/* Gift List Styles */
.content-wrapper #gift-main ul.gift_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      padding: 0 !important;
}

.content-wrapper #gift-main ul.gift_list li {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      padding: 20px;
      text-align: center;
      width: 250px !important;
      margin: 0 0 8px 0 !important;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
}

.content-wrapper #gift-main ul.gift_list li:hover {
      border-color: var(--light-orange);
      background: rgba(255, 255, 255, 0.1);
}

.content-wrapper #gift-main ul.gift_list li::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transition: left 0.5s ease;
}

.content-wrapper #gift-main ul.gift_list li:hover::before {
      left: 100%;
}

/* Gift Item Container */
.content-wrapper #gift-main ul.gift_list li a {
      text-decoration: none;
      color: inherit;
      display: block;
}

.content-wrapper #gift-main ul.gift_list li a:hover {
      text-decoration: none;
}

/* Gift Image Container */
.content-wrapper #gift-main ul.gift_list li .item_gift {
      width: 178px !important;
      height: 150px !important;
      margin: auto;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.content-wrapper #gift-main ul.gift_list li:hover .item_gift {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Gift Image */
.content-wrapper #gift-main ul.gift_list li .item_gift img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: all 0.3s ease;
}

.content-wrapper #gift-main ul.gift_list li:hover .item_gift img {
      transform: scale(1.1);
}

/* Gift Name */
.content-wrapper #gift-main ul.gift_list li p {
      margin-top: 15px;
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Points Display */
.content-wrapper #gift-main ul.gift_list li p .point_ {
      color: var(--light-orange);
      font-weight: bold;
      font-size: 18px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Claim Button */
.content-wrapper #gift-main ul.gift_list li .redeem {
      display: inline-block;
      padding: 5px 25px;
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
      color: #fff;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      margin-top: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      border: none;
      cursor: pointer;
}

.content-wrapper #gift-main .gift_list li>a p {
      color: #fff !important;
}

.content-wrapper #gift-main ul.gift_list li .redeem:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, var(--light-orange), var(--blue-teal));
      text-decoration: none;
      color: #fff;
}

.content-wrapper #gift-main ul.gift_list li .redeem:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

@keyframes animate-preloader {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

.content-wrapper #gift-main ul.gift_list li input[type="hidden"] {
      display: none;
}

.content-wrapper #gift-main ul.gift_list li {
      animation: fadeInUp 0.6s ease-out;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(1) {
      animation-delay: 0.1s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(2) {
      animation-delay: 0.2s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(3) {
      animation-delay: 0.3s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(4) {
      animation-delay: 0.4s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(5) {
      animation-delay: 0.5s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(6) {
      animation-delay: 0.6s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(7) {
      animation-delay: 0.7s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(8) {
      animation-delay: 0.8s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(9) {
      animation-delay: 0.9s;
}

.content-wrapper #gift-main ul.gift_list li:nth-child(10) {
      animation-delay: 1s;
}

@keyframes fadeInUp {
      from {
            opacity: 0;
            transform: translateY(30px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.content-wrapper #gift-main ul.gift_list li.disabled {
      opacity: 0.6;
      pointer-events: none;
}

.content-wrapper #gift-main ul.gift_list li.disabled .redeem {
      background: rgba(128, 128, 128, 0.5);
      cursor: not-allowed;
}

.content-wrapper #gift-main ul.gift_list li.out-of-stock::after {
      content: 'Out of Stock';
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(255, 0, 0, 0.8);
      color: #fff;
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: bold;
}

.content-wrapper #gift-main ul.gift_list li.low-stock::after {
      content: 'Low Stock';
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(255, 165, 0, 0.8);
      color: #fff;
      padding: 5px 10px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: bold;
}

#modalConfirm,
.content-wrapper #gift-main #modalMsg {
      position: fixed;
      top: 0;
      left: 0;
      height: 60vh !important;
      z-index: 999;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(5px);
}

@keyframes modalSlideIn {
      from {
            opacity: 0;
            transform: translateY(-50px) scale(0.9);
      }

      to {
            opacity: 1;
            transform: translateY(0) scale(1);
      }
}

.content-wrapper #gift-main .modalMsg {
      border: 0 !important;
}

.content-wrapper #gift-main .modalMsgClose {
      position: absolute;
      top: 10px;
      right: -6px;
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid rgba(255, 255, 255, 0.2);
}

.content-wrapper #gift-main .modalMsgClose:hover {
      background: rgba(255, 0, 0, 0.3);
      transform: scale(1.1);
      border-color: rgba(255, 0, 0, 0.5);
}

.content-wrapper #gift-main .modalMsgContent {
      text-align: center;
      color: #fff;
}

.content-wrapper #gift-main #modalError {
      padding: 20px 0;
}

.content-wrapper #gift-main .errText {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 25px;
      color: #fff;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      line-height: 1.4;
}

.content-wrapper #gift-main .modalBtnfoot {
      display: flex;
      justify-content: center;
      gap: 15px;
}

.content-wrapper #gift-main #btnOk {
      padding: 12px 30px;
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
      color: #fff;
      border: none;
      border-radius: 25px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      min-width: 100px;
}

.content-wrapper #gift-main #btnOk:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, var(--light-orange), var(--blue-teal));
}

.content-wrapper #gift-main #btnOk:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

[data-pages="gift"] .footer-container {
      display: none;
}

.content-wrapper #gift-main .modalMsg {
      background: var(--main-color) !important;
      border-radius: 10px !important;
}

.content-wrapper #gift-main .modalMsgMain {
      background: var(--main-color) !important;
}

.content-wrapper #gift-main .modalMsg .modalMsgMain {
      border: 0 !important;
      border-radius: 10px !important;
}

@keyframes modalSlideOut {
      from {
            opacity: 1;
            transform: translateY(0) scale(1);
      }

      to {
            opacity: 0;
            transform: translateY(-50px) scale(0.9);
      }
}

.content-wrapper #gift-main #btnOk:focus {
      outline: 3px solid rgba(255, 255, 255, 0.5);
      outline-offset: 2px;
}

.content-wrapper #gift-main .modalMsgClose:focus {
      outline: 3px solid rgba(255, 255, 255, 0.5);
      outline-offset: 2px;
}

.content-wrapper #gift-main .tablename {
      margin: 0 !important;
}

.content-wrapper #gift-main .tablename a {
      font-size: 15px !important;
      height: 40px !important;
      line-height: 34px;
      background-color: var(--teal) !important;

}

.content-wrapper #gift-main .gift_detail h2 {
      line-height: 40px !important;
      height: 40px !important;
}

.content-wrapper #gift-main .gift_detail_info {
      border-radius: 0 !important;
}

.content-wrapper #gift-main .footDiv a {
      background: var(--blue-teal) !important;
      height: 25px;
}

.gift_detail_info .gift_info_left img {
      border-radius: 10px;
}

.content-wrapper #gift-main .gift_detail h2,
.content-wrapper #gift-main .footDiv {
      background: var(--teal) !important;
}

/* address book style  */

.content-wrapper #gift-main .d5-modal {
      width: 900px;
      margin: 40px auto;
      background: #d9d9d9;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
      overflow: hidden;
      color: #111;
      font-family: inherit;
}

.content-wrapper #gift-main .d5-modal-header {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: 16px 20px;
      background: #e1e1e1;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.content-wrapper #gift-main .d5-modal-title {
      font-weight: 700;
      font-size: 18px;
      color: #111;
}

.content-wrapper #gift-main .d5-modal-close {
      position: absolute;
      right: 12px;
      top: 8px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: #111;
      font-size: 22px;
      cursor: pointer;
}

.content-wrapper #gift-main .d5-modal-body {
      background: var(--form-color);
      padding: 18px 22px 22px 22px;
}

.content-wrapper #gift-main .d5-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 24px;
}

.content-wrapper #gift-main .d5-form-group {
      display: flex;
      flex-direction: column;
}

.content-wrapper #gift-main .d5-form-group--full {
      grid-column: 1 / -1;
}

.content-wrapper #gift-main .d5-form-group label {
      font-size: 14px;
      font-weight: 600;
      color: #222;
      margin-bottom: 6px;
}

.content-wrapper #gift-main .d5-form-group .req {
      color: #d43;
}

.content-wrapper #gift-main .d5-input {
      width: 100%;
      height: 38px;
      border-radius: 8px;
      border: 1px solid #c8c8c8;
      background: #eef3fb;
      padding: 8px 12px;
      font-size: 14px;
      color: #2a2a2a;
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -ms-box-shadow: none;
      -o-box-shadow: none;
      box-shadow: none;
}

.content-wrapper #gift-main .d5-input:focus {
      outline: none;
      border: 1px solid var(--blue-teal);
}

.content-wrapper #gift-main .d5-textarea {
      height: 60px;
      resize: vertical;
}

body .tablename a {
      color: #fff !important;
}

.content-wrapper #gift-main .d5-checkbox {
      margin-top: 6px;
}

.content-wrapper #gift-main .d5-modal-footer {
      display: flex;
      justify-content: space-between;
      padding: 14px 22px 0px 22px;
      margin: 24px 0 0 0;
}

.content-wrapper #gift-main .d5-btn {
      min-width: 120px;
      height: 36px;
      border-radius: 8px;
      border: none;
      font-weight: 700;
      cursor: pointer;
}

.content-wrapper #gift-main .d5-btn-primary {
      background: var(--main-color);
      color: #fff;
}

.content-wrapper #gift-main .d5-btn-secondary {
      background: #6d6a6a;
      color: #fff;
}


/* end gift style  */

/* Turnover Form Styles */
.table_turnover {
      width: 100%;
      padding: 20px 20px 0 20px;
      border-collapse: separate;
      border-spacing: 10px;
      margin-top: -5px;
      background: transparent;
}

.table_turnover td {
      border-radius: 8px;
      transition: all 0.3s ease;
      height: 48px;
}

.table_turnover .start_time,
.table_turnover .end_time {
      vertical-align: middle;
      text-align: center;
      background: var(--main-color) !important;
      border-radius: 8px;
      font-weight: 600;
      color: #fff !important;
      border: 1px solid var(--blue-teal) !important;
      min-width: 120px;
}

.table_turnover .start_time .tit,
.table_turnover .end_time .tit {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
}

.table_turnover input[type="text"] {
      width: 170px;
      height: 48px;
      border: 1px solid var(--blue-teal) !important;
      border-radius: 8px;
      font-size: 14px;
      color: #fff !important;
      background: var(--main-color) !important;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      text-align: center;
}

.table_turnover input[type="text"]:focus {
      outline: none;
      border-color: var(--blue-teal);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
      transform: translateY(-1px);
}

.table_turnover input[type="text"]:hover {
      border-color: #b0b0b0;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table_turnover input[type="text"]::placeholder {
      color: #999;
      font-style: italic;
}

/* Turnover Container */
.iturnover {
      margin: 10px;
      margin-left: 10px;
      padding: 0 20px;
      background: var(--main-color);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Fieldset Styles */
.iturnover fieldset {
      border: 1px solid var(--light-orange) !important;
      padding: 25px;
      margin-top: 10px;
      border-radius: 5px;
      background: var(--main-color);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
}

.iturnover fieldset:hover {
      border-color: var(--blue-teal);
      box-shadow: 0 4px 15px rgb(254 255 0 / 20%);
      transform: translateY(-2px);
}

.iturnover fieldset legend {
      font-weight: bold;
      width: max-content;
      float: inherit;
      padding: 0 15px;
      margin-bottom: 15px;
      color: #fff;
      font-size: 16px;
      position: relative;
      align-items: center;
}

.iturnover fieldset legend input[type="checkbox"] {
      position: relative;
      top: 5px;
      display: inline-block;
      width: 18px;
      height: 18px;
      accent-color: var(--blue-teal);
      cursor: pointer;
      transition: all 0.3s ease;
}

.iturnover fieldset legend input[type="checkbox"]:checked {
      transform: scale(1.1);
}

/* Checkbox Container */
.iturnover .checkbox {
      width: 250px !important;
      margin: 8px 0;
      padding: 8px 12px;
      border-radius: 6px;
      transition: all 0.3s ease;
      align-items: center;
      gap: 10px;
      cursor: pointer;
}

.iturnover .checkbox:hover {
      transform: translateX(5px);
}

.iturnover .checkbox input[type="checkbox"] {
      width: 40px;
      height: 20px;
      accent-color: var(--blue-teal);
      cursor: pointer;
      transition: all 0.3s ease;
      margin: 0;
}

.iturnover .checkbox input[type="checkbox"]:checked {
      transform: scale(1.1);
}

/* Label Styles */
.iturnover .label_turnover {
      color: #fff;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.3s ease;
      user-select: none;
}

.iturnover .checkbox:hover .label_turnover {
      color: var(--light-orange);
      font-weight: 600;
}

.iturnover .checkbox input[type="checkbox"]:checked+.label_turnover {
      color: var(--light-orange);
      font-weight: 600;
}

/* Submit Button */
.iturnover .btn.gradient.center-submit {
      width: 50% !important;
      height: 48px !important;
      margin: 10px 0 !important;
      line-height: 10px;
      color: rgb(255, 235, 174);
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
      border: none;
      border-radius: 10px;
      padding: 8px 20px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.iturnover .btn.gradient.center-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, var(--light-orange), var(--blue-teal));
      color: #ffffff;
}

.iturnover .btn.gradient.center-submit:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.iturnover .btn.gradient.center-submit:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

@keyframes fadeInUp {
      from {
            opacity: 0;
            transform: translateY(20px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.table_turnover,
.iturnover fieldset {
      animation: fadeInUp 0.5s ease-out;
}

.iturnover fieldset:nth-child(1) {
      animation-delay: 0.1s;
}

.iturnover fieldset:nth-child(2) {
      animation-delay: 0.2s;
}

.iturnover fieldset:nth-child(3) {
      animation-delay: 0.3s;
}

.iturnover fieldset:nth-child(4) {
      animation-delay: 0.4s;
}

.iturnover fieldset:nth-child(5) {
      animation-delay: 0.5s;
}

/* Loading state for submit button */
.iturnover .btn.gradient.center-submit.loading {
      position: relative;
      color: transparent;
}

.iturnover .btn.gradient.center-submit.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
}

/* Error states */
.iturnover input[type="text"].error {
      border-color: #dc3545;
      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.iturnover input[type="text"].error:focus {
      box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Success states */
.iturnover input[type="text"].success {
      border-color: #28a745;
      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
}

.iturnover input[type="text"].success:focus {
      box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2);
}

/* Disabled states */
.iturnover input[type="text"]:disabled,
.iturnover .checkbox input[type="checkbox"]:disabled,
.iturnover .btn.gradient.center-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
}

.iturnover .btn.gradient.center-submit:disabled:hover {
      transform: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Focus management for accessibility */
.iturnover fieldset:focus-within {
      border-color: var(--blue-teal);
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.iturnover .checkbox:focus-within {
      background: rgba(0, 123, 255, 0.05);
      outline: 2px solid var(--blue-teal);
      outline-offset: 2px;
}

/* Print styles */
@media print {
      .iturnover .btn.gradient.center-submit {
            display: none;
      }

      .iturnover fieldset {
            break-inside: avoid;
            border: 1px solid #000;
      }
}

/* Turnover Results Table Styles */
.right.bot {
      margin: 20px 0;
}

.turnover {
      min-width: 300px;
      padding: 10px;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      background: var(--main-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      border: 1px solid var(--blue-teal);
}

.turnover tbody {
      width: 100%;
}

.turnover tr {
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.turnover tr:last-child {
      border-bottom: none;
}

.turnover tr:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.turnover tr[style*="background:#a6a6a6"] {
      background: var(--blue-teal) !important;
      color: #ffffff;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 40px;
      text-align: center;
      border-bottom: 2px solid var(--light-orange);
}

.turnover tr[style*="background:#a6a6a6"] td {
      padding: 5px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.turnover td {
      padding: 12px 8px;
      border: none;
      color: #ffffff;
      font-size: 13px;
      vertical-align: middle;
      text-align: center;
      transition: all 0.3s ease;
}

.turnover tr:not([style*="background:#a6a6a6"]) td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.turnover tr:not([style*="background:#a6a6a6"]):hover td {
      background: rgba(255, 255, 255, 0.05);
      color: var(--light-orange);
}

/* ID Column */
.turnover td:first-child {
      font-weight: 600;
      color: var(--light-orange);
      min-width: 50px;
}

/* Date Columns */
.turnover td:nth-child(2),
.turnover td:nth-child(3) {
      color: #cccccc;
      min-width: 140px;
}

/* Provider Column */
.turnover td:nth-child(4) {
      font-weight: 500;
      color: #ffffff;
      min-width: 120px;
      text-align: left;
      padding-left: 15px;
}

/* Turnover Column */
.turnover td:nth-child(5) {
      font-weight: 600;
      color: var(--light-orange);
      min-width: 80px;
      font-family: 'Courier New', monospace;
}

/* Total Row */
.turnover tr[style*="font-weight: bold"] {
      background: var(--blue-teal) !important;
      border-top: 2px solid var(--light-orange);
      font-weight: bold;
      height: 48px;
}

.turnover tr[style*="font-weight: bold"] td {
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 5px 8px;
}

.turnover tr[style*="font-weight: bold"] td:last-child {
      color: var(--light-orange);
      font-size: 16px;
      font-weight: 800;
}

@keyframes fadeInRow {
      from {
            opacity: 0;
            transform: translateY(10px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.turnover tr:not([style*="background:#a6a6a6"]) {
      animation: fadeInRow 0.3s ease-out;
}

.turnover tr:nth-child(2) {
      animation-delay: 0.1s;
}

.turnover tr:nth-child(3) {
      animation-delay: 0.2s;
}

.turnover tr:nth-child(4) {
      animation-delay: 0.3s;
}

.turnover tr:nth-child(5) {
      animation-delay: 0.4s;
}

.turnover tr:nth-child(6) {
      animation-delay: 0.5s;
}

.turnover tr:nth-child(7) {
      animation-delay: 0.6s;
}

.turnover tr:nth-child(8) {
      animation-delay: 0.7s;
}

/* Loading state for table */
.turnover.loading {
      position: relative;
      opacity: 0.7;
}

.turnover.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--light-orange);
      animation: spin 1s linear infinite;
}

/* Empty state */
.turnover:empty::before {
      content: 'No turnover data available';
      display: block;
      text-align: center;
      padding: 40px 20px;
      color: #cccccc;
      font-style: italic;
      font-size: 14px;
}

/* Print styles for table */
@media print {
      .turnover {
            border: 1px solid #000;
            box-shadow: none;
      }

      .turnover tr[style*="background:#a6a6a6"] {
            background: #000 !important;
            color: #fff;
      }

      .turnover tr[style*="font-weight: bold"] {
            background: #333 !important;
            color: #fff;
      }

      .turnover td {
            border: 1px solid #ccc;
      }
}

/* Focus states for accessibility */
.turnover tr:focus-within {
      outline: 2px solid var(--light-orange);
      outline-offset: 2px;
}

.turnover td:focus {
      outline: 2px solid var(--light-orange);
      outline-offset: 1px;
      background: rgba(255, 255, 255, 0.1);
}

/* Member Message Form and Table Styles */

.center-data form {
      margin: 0px !important;
      background: var(--main-color);
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid var(--blue-teal);
}

/* Member Message Table */
.member_msg {
      width: 100%;
      border-collapse: separate;
      border-spacing: 10px;
      margin-top: -5px;
      background: transparent;
}

.member_msg td {
      border-radius: 8px;
      transition: all 0.3s ease;
      vertical-align: middle;
      text-align: center;
}

.member_msg .tit {
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      display: inline-block;
      margin-right: 10px;
}

.member_msg input[type="text"] {
      width: 150px;
      height: 48px;
      padding: 10px 15px;
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      font-size: 14px;
      color: #ffffff;
      background: var(--main-color);
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      text-align: center;
}

.member_msg input[type="text"]:focus {
      outline: none;
      border-color: var(--light-orange);
      box-shadow: 0 0 0 3px rgba(255, 235, 174, 0.1);
      transform: translateY(-1px);
}

.member_msg input[type="text"]:hover {
      border-color: var(--light-orange);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.member_msg input[type="text"]::placeholder {
      color: #cccccc;
      font-style: italic;
}

/* Submit Button for Member Message */
.member_msg .btn.gradient.center-submit {
      width: unset !important;
      font-size: 16px;
      height: 48px !important;
      margin-left: 20px;
      margin: 10px;
      line-height: 10px;
      color: rgb(255, 235, 174);
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;
      background: linear-gradient(135deg, var(--blue-teal), var(--light-orange));
      border: none;
      border-radius: 10px;
      padding: 8px 20px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      text-transform: uppercase;
      letter-spacing: 0.5px;
}

.member_msg .btn.gradient.center-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      background: linear-gradient(135deg, var(--light-orange), var(--blue-teal));
      color: #ffffff;
}

.member_msg .btn.gradient.center-submit:active {
      transform: translateY(0);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.member_msg .btn.gradient.center-submit:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 235, 174, 0.3);
}

.msgbox {
      min-width: 700px;
      border-collapse: collapse;
      background: var(--main-color);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      border: 1px solid var(--blue-teal);
      width: 100%;
}

.msgbox thead {
      background: var(--blue-teal);
}

.msgbox thead tr {
      line-height: 40px;
      text-align: center;
      border-bottom: 2px solid var(--light-orange);
}

.msgbox thead th {
      padding: 5px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      vertical-align: middle;
}

.msgbox thead th:nth-child(3) {
      text-align: left;
      padding-left: 20px;
}

.msgbox thead th:nth-child(4) {
      text-align: left;
}

.msgbox thead th:nth-child(5) {
      width: 150px;
}

.msgbox tbody {
      background: var(--main-color);
}

.msgbox tbody tr {
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.msgbox tbody tr:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.msgbox tbody tr:last-child {
      border-bottom: none;
}

.msgbox tbody td {
      padding: 12px 8px;
      border: none;
      color: #ffffff;
      font-size: 13px;
      vertical-align: middle;
      text-align: center;
      transition: all 0.3s ease;
}

.msgbox tbody td:nth-child(3) {
      text-align: left;
      padding-left: 20px;
      font-weight: 500;
      color: #ffffff;
      min-width: 120px;
}

.msgbox tbody td:nth-child(4) {
      text-align: left;
      color: #cccccc;
      min-width: 200px;
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

.msgbox tbody td:nth-child(5) {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: #cccccc;
      min-width: 150px;
}

.msgbox tbody td:nth-child(6) {
      font-weight: 600;
      min-width: 80px;
}

/* Status Column Styling */
.msgbox tbody td:nth-child(6) {
      position: relative;
}

.msgbox tbody td:nth-child(6)::before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
      background: var(--light-orange);
}

/* Empty State */
.msgbox tbody:empty::after {
      content: 'No messages found';
      display: block;
      text-align: center;
      padding: 40px 20px;
      color: #cccccc;
      font-style: italic;
      font-size: 14px;
}

/* Loading State */
.msgbox.loading {
      position: relative;
      opacity: 0.7;
}

.msgbox.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--light-orange);
      animation: spin 1s linear infinite;
}

@keyframes slideInUp {
      from {
            opacity: 0;
            transform: translateY(30px);
      }

      to {
            opacity: 1;
            transform: translateY(0);
      }
}

.center-data form,
.msgbox {
      animation: slideInUp 0.5s ease-out;
}

/* Focus management for accessibility */
.center-data form:focus-within {
      border-color: var(--light-orange);
      box-shadow: 0 0 0 3px rgba(255, 235, 174, 0.1);
}

.member_msg input[type="text"]:focus,
.member_msg .btn.gradient.center-submit:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 235, 174, 0.3);
}

.msgbox tr:focus-within {
      outline: 2px solid var(--light-orange);
      outline-offset: 2px;
}

.msgbox td:focus {
      outline: 2px solid var(--light-orange);
      outline-offset: 1px;
      background: rgba(255, 255, 255, 0.1);
}

/* Print styles */
@media print {
      .center-data form {
            border: 1px solid #000;
            box-shadow: none;
      }

      .msgbox {
            border: 1px solid #000;
            box-shadow: none;
      }

      .msgbox thead {
            background: #000 !important;
            color: #fff;
      }

      .msgbox tbody td {
            border: 1px solid #ccc;
      }
}

.vip-container {
      width: 100% !important;
}

/* Registration Successful Modal Styles */
.registration-success-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      display: flex !important;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      backdrop-filter: blur(5px);
}

.registration-success-content {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
      border-radius: 20px;
      padding: 20px;
      max-width: 450px;
      width: 90%;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
      from {
            opacity: 0;
            transform: translateY(-50px) scale(0.9);
      }

      to {
            opacity: 1;
            transform: translateY(0) scale(1);
      }
}

.registration-success-logo {
      margin-bottom: 30px;
}

.registration-success-logo img {
      width: 280px;
}

.registration-success-logo h1 .kc {
      background: linear-gradient(45deg, #ffd700, #ff6b35);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
}

.registration-success-logo h1 .gaming {
      color: #ffffff;
      -webkit-text-fill-color: #ffffff;
}

.registration-success-title {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: bold;
      margin-bottom: 10px;
}

.registration-success-description {
      color: #cccccc;
      font-size: 1rem;
      margin-bottom: 30px;
      line-height: 1.5;
}

.login-info-container {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 25px;
      position: relative;
      backdrop-filter: blur(10px);
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.login-info-row {
      align-items: center;
      color: #ffffff;
      font-size: 1rem;
}

.login-info-row:last-child {
      margin-bottom: 0;
}

.login-info-label {
      font-weight: 600;
      color: #cccccc;
      width: 120px;
      margin: 10px;
      text-align: left;
}

.login-info-value {
      font-weight: 600;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      padding: 5px 15px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.2);
}

.copy-button {
      background: none;
      border: none;
      color: #ffffff;
      cursor: pointer;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s ease;
      margin-left: 10px;
}

.copy-button:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: scale(1.1);
}

.copy-button:active {
      transform: scale(0.95);
}

.save-reminder {
      color: #ffffff;
      font-size: 0.9rem;
      margin-bottom: 25px;
      font-style: italic;
}

.save-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0 40px 10px;
}

.save-option-btn {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      color: #ffffff;
      border: none;
      border-radius: 5px;
      /* padding: 15px 20px; */
      height: 40px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: left;
      gap: 20px;
      box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.save-option-btn:hover {
      background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.save-option-btn:active {
      transform: translateY(0);
}

.save-option-btn i {
      font-size: 1.2rem;
      background: var(--teal);
      height: 40px;
      width: 40px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px 0 0 5px;
}

.btnView {
      background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
      color: #ffffff;
      border: none;
      border-radius: 5px;
      padding: 15px 40px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 50%;
      box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
      height: 48px;
      display: flex;
      text-align: center;
      align-items: center;
      margin-left: 25%;
}

.btnView:hover {
      background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.btnView:active {
      transform: translateY(0);
}

/* Animation for copy success */
.copy-success {
      animation: copyPulse 0.6s ease-out;
}

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

      50% {
            transform: scale(1.2);
            background: rgba(76, 175, 80, 0.3);
      }

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

/* Loading state for buttons */
.save-option-btn.loading,
.submit-btn.loading {
      position: relative;
      color: transparent;
}

.save-option-btn.loading::after,
.submit-btn.loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border: 2px solid transparent;
      border-top: 2px solid #ffffff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
}

@keyframes spin {
      0% {
            transform: rotate(0deg);
      }

      100% {
            transform: rotate(360deg);
      }
}

/* Focus states for accessibility */
.save-option-btn:focus,
.submit-btn:focus,
.copy-button:focus {
      outline: 2px solid #ffffff;
      outline-offset: 2px;
}

/* Dark overlay animation */
.registration-success-modal {
      animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
      from {
            opacity: 0;
      }

      to {
            opacity: 1;
      }
}

/* Close button */
.registration-success-close {
      position: absolute;
      top: 15px;
      right: 20px;
      background: none;
      border: none;
      color: #cccccc;
      font-size: 1.5rem;
      cursor: pointer;
      transition: color 0.3s ease;
      z-index: 10;
}

.registration-success-close:hover {
      color: #ffffff;
}

.registration-success-modal.success {
      animation: successGlow 0.5s ease-out;
}

@keyframes successGlow {
      0% {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }

      50% {
            box-shadow: 0 20px 60px rgba(76, 175, 80, 0.3);
      }

      100% {
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      }
}

.fa-times-circle {
      background-image: url('../../design5/images/gaming/close.png');
      background-size: 35%;
      display: block;
      background-repeat: no-repeat;
      width: 50px;
      height: 50px;
}

.main_games.afbsports2 {
      min-height: 1500px;
}

.main_games.we_sports,
.main_games.horse_racing,
.main_games.tf_sports,
.main_games.sbo_sports,
.main_games.saba_sports {
      min-height: 1200px;
}

/* Achievement Sidebar Navigation */
#sidebar_ach {
      background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6b 100%);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
}

#sidebar_ach .list-unstyled {
      margin: 0;
      padding: 0;
      list-style: none;
}

#sidebar_ach .list-unstyled li {
      margin-bottom: 10px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
}

#sidebar_ach .list-unstyled li:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateX(5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#sidebar_ach .s-item {
      display: block;
      padding: 15px 20px;
      color: #ffffff;
      text-decoration: none;
      font-weight: 600;
      font-size: 16px;
      background: linear-gradient(135deg, #2d4a6b 0%, #1e3a5f 100%);
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
}

#sidebar_ach .s-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transition: left 0.5s;
}

#sidebar_ach .s-item:hover::before {
      left: 100%;
}

#sidebar_ach .s-item:hover {
      background: linear-gradient(135deg, var(--main-color) 0%, var(--blue-teal) 100%);
      color: #ffffff;
      transform: translateX(5px);
}

#sidebar_ach .s-item.active {
      background: linear-gradient(135deg, var(--orange) 0%, #ff8c42 100%);
      box-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
}

/* Sub Menu Styles */
#sidebar_ach .sub_menu {
      background: rgba(0, 0, 0, 0.2);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      overflow: hidden;
      transition: all 0.3s ease;
}

#sidebar_ach .sub_menu a {
      display: block;
      padding: 12px 20px 12px 40px;
      color: #cccccc;
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
      position: relative;
      border-left: 3px solid transparent;
}

#sidebar_ach .sub_menu a::before {
      content: '▶';
      position: absolute;
      left: 20px;
      color: var(--orange);
      font-size: 10px;
      transition: all 0.3s ease;
}

#sidebar_ach .sub_menu a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      border-left-color: var(--orange);
      transform: translateX(5px);
}

#sidebar_ach .sub_menu a:hover::before {
      transform: translateX(3px);
}

#sidebar_ach .sub_menu a.active {
      background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 140, 66, 0.2) 100%);
      color: var(--orange);
      border-left-color: var(--orange);
      font-weight: 600;
}

/* Achievement Content Layout */
#sidebar_ach .achievement_content {
      flex: 1;
      margin-left: 20px;
      background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6b 100%);
      border-radius: 15px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      width: 1030px;
}

#sidebar_ach .center-table-achievement {
      width: 100% !important;
      overflow-x: auto;
}

/* Achievement Table Styles */
#sidebar_ach #achievement_data table {
      width: 100%;
      border-collapse: collapse;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

#sidebar_ach #achievement_data thead {
      background: linear-gradient(135deg, var(--main-color) 0%, var(--blue-teal) 100%);
}

#sidebar_ach #achievement_data th {
      padding: 5px 20px;
      text-align: left;
      font-weight: 600;
      font-size: 16px;
      border-bottom: 2px solid rgba(255, 255, 255, 0.1);
      text-transform: uppercase;
      letter-spacing: 1px;
}

#sidebar_ach #achievement_data tbody tr {
      background: rgba(255, 255, 255, 0.02);
      transition: all 0.3s ease;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#sidebar_ach #achievement_data tbody tr:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

#sidebar_ach #achievement_data tbody tr:nth-child(even) {
      background: rgba(255, 255, 255, 0.03);
}

#sidebar_ach #achievement_data tbody tr:nth-child(even):hover {
      background: rgba(255, 255, 255, 0.12);
}

#sidebar_ach #achievement_data td {
      padding: 5px 20px;
      color: #ffffff;
      font-size: 14px;
      vertical-align: middle;
      text-align: left !important;
}

#sidebar_ach #achievement_data td:first-child {
      font-weight: 600;
      color: var(--orange);
      font-size: 16px;
}

#sidebar_ach #achievement_data td:nth-child(2) {
      color: #cccccc;
      font-weight: 500;
}

#sidebar_ach #achievement_data td:nth-child(3) {
      color: #ffd700;
      font-weight: 600;
      font-size: 16px;
}

.ach_progress {
      background: rgba(0, 0, 0, 0.3) !important;
      border-radius: 20px !important;
      height: 30px !important;
      position: relative !important;
      overflow: hidden !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      margin-bottom: unset !important;
}

.ach_progress--green {
      height: 100%;
      background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
      transition: width 0.5s ease;
      overflow: hidden;
}

.ach_progress--green::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      animation: shimmer 2s infinite;
}

@keyframes shimmer {
      0% {
            left: -100%;
      }

      100% {
            left: 100%;
      }
}

.ach_progress--text {
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffffff;
      font-weight: 600;
      font-size: 12px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      z-index: 2;
      white-space: nowrap;
}

.ach_text--lucky-style {
      font-family: 'Arial', sans-serif;
      letter-spacing: 0.5px;
}

.ach_position--center {
      text-align: center;
}

.ach_box-shadow {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}


#sidebar_ach #achievement_data tbody tr {
      animation: fadeInUp 0.5s ease forwards;
      opacity: 0;
      transform: translateY(20px);
}

#sidebar_ach #achievement_data tbody tr:nth-child(1) {
      animation-delay: 0.1s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(2) {
      animation-delay: 0.2s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(3) {
      animation-delay: 0.3s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(4) {
      animation-delay: 0.4s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(5) {
      animation-delay: 0.5s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(6) {
      animation-delay: 0.6s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(7) {
      animation-delay: 0.7s;
}

#sidebar_ach #achievement_data tbody tr:nth-child(8) {
      animation-delay: 0.8s;
}

@keyframes fadeInUp {
      to {
            opacity: 1;
            transform: translateY(0);
      }
}

/* Hover effects for interactive elements */
#sidebar_ach .s-item:active,
#sidebar_ach .sub_menu a:active {
      transform: scale(0.98);
}

/* Focus states for accessibility */
#sidebar_ach .s-item:focus,
#sidebar_ach .sub_menu a:focus {
      outline: 2px solid var(--orange);
      outline-offset: 2px;
}

/* Loading state for progress bars */
.ach_progress.loading .ach_progress--green {
      animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {

      0%,
      100% {
            opacity: 0.6;
      }

      50% {
            opacity: 1;
      }
}

/* end achievement */

.bank-input-field {
      width: 100%;
      height: 48px;
      padding: 10px 15px;
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      font-weight: 600;
      border-radius: 6px;
      transition: all 0.2s ease;
      cursor: default;
      user-select: none;
}

.bank-input-field:focus {
      background-color: rgba(0, 0, 0, 0.02);
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
      border: 1px solid var(--light-orange);
      outline: none;
}

.bank-input-field[readonly] {
      background: var(--teal-light);
      border: 1px solid var(--blue-teal);
      cursor: not-allowed;
      color: #fff
}

.bank-input-field[readonly]:hover {
      background: var(--teal-light);
      border: 1px solid var(--light-orange);
      color: #fff;
}

.bank-input-field.empty-value {
      color: #6c757d;
      font-style: italic;
}

.bank-input-field.empty-value {
      color: #999;
      font-style: italic;
}

/* Promotion Code Modal Styles */
.promotion-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      transition: all 0.3s ease;
      display: none;
}

.promotion-modal-content {
      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      max-width: 570px;
      width: 100%;
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
      animation: promotionModalFadeIn 0.3s ease forwards;
}

.promotion-modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
}

.promotion-modal-header {
      padding: 20px 25px 15px;
      text-align: center;
      position: relative;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.promotion-modal-title {
      color: #fff;
      font-size: 1.5rem;
      font-weight: 600;
      margin: 0;
      text-align: center;
}

.promotion-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: #fff;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 16px;
}

.promotion-modal-close:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
}

.promotion-modal-body {
      padding: 25px;
      text-align: center;
}

.promotion-prompt {
      color: #fff;
      font-size: 20px;
      margin-bottom: 20px;
      font-weight: 400;
}

.promotion-input-group {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
}

.promotion-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 12px 15px;
      color: #fff;
      font-size: 18px;
      transition: all 0.3s ease;
      height: 48px;
}

.promotion-input::placeholder {
      color: rgba(255, 255, 255, 0.6);
}

.promotion-input:focus {
      outline: none;
      border-color: #4ecdc4;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
}

.promotion-submit-btn {
      background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      border: none;
      border-radius: 8px;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: #fff;
      font-size: 16px;
}

.promotion-submit-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}

.promotion-submit-btn:active {
      transform: scale(0.95);
}

.promotion-link {
      margin-top: 15px;
}

.promotion-link a {
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
      padding: 5px 10px;
      border-radius: 5px;
}

.promotion-link a:hover {
      color: #4ecdc4;
      background: rgba(78, 205, 196, 0.1);
}

.promotion-link a i {
      font-size: 1rem;
      transition: transform 0.3s ease;
}

.promotion-link a:hover i {
      transform: translateX(3px);
}

@keyframes promotionModalFadeIn {
      from {
            opacity: 0;
            transform: scale(0.8) translateY(-20px);
      }

      to {
            opacity: 1;
            transform: scale(1) translateY(0);
      }
}

/* introduction modal */
.highlight {
      position: relative;
      box-shadow: inset 0 0 1px 2px #ffffff;
      z-index: 999999 !important;
      border: 2px solid #100f23;
      outline: 2px solid var(--light-orange) !important;
      background-image: var(--lg-btn);
      border-radius: 5px !important;
      font-weight: bold;
      margin-left: 10px;
}

.balance-box.highlight {
      background-image: unset !important;
}

.remove-top {
      padding-top: 0 !important;
}

.remove-fixed {
      position: unset !important;
}

.nav-links.highlight {
      padding: 8px 15px !important;
}

.sidebar-newed {
      margin-top: 60px !important;
}

.main-content-wrapper-newed {
      position: relative !important;
      top: -880px !important;
}

.header-btn.deposit-btn.highlight {
      padding: 6px 34px !important;
}

.logo_name.highlight {
      width: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
}

.logo_name.highlight img {
      width: 200px !important;
}

#introModal .skip-btn,
#introModal .next-btn {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      line-height: 18px !important;
}

#introModal .skip-btn {
      background-color: #2f2d59;
      color: #ffffff;
}

#introModal .next-btn {
      background-color: #e51177;
      color: white;
      margin: auto;
}

#introModal .dot.active {
      background-color: #4400ff;
}

#introModal .navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

#introModal .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      /* display: flex; */
      justify-content: center;
      align-items: center;
      /* z-index: 999 !important; */
}

#introModal .step p {
      color: #000;
}

#introModal #modalContent::before {
      content: "" !important;
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      border: 10px solid transparent;
      border-bottom-color: white;
}

#introModal .progress {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin: auto;
      background: unset;
      height: unset !important;
}

#introModal #modalContent.step-5-pseudo::before {
      content: "" !important;
      position: absolute;
      top: 58px !important;
      left: -6% !important;
      transform: translateX(-50%);
      border: 19px solid transparent;
      border-right-color: white;
}

/* end introduction modal */

/* Social one click register buttons */

.btn-social {
      display: inline-flex;
      align-items: center;
      flex-direction: column;
      padding: 5px 10px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: bold;
      font-size: 14px;
      color: #000;
      transition: opacity 0.3s ease;
}

.btn-social img {
      display: block;
}

.btn-social.oneclick:hover {
      opacity: 0.7;
}

.btn-social.oneclick {
      position: relative;
      overflow: hidden;
}

.btn-social.oneclick::after {
      content: "";
      position: absolute;
      top: 0;
      left: -150%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 100%);
      transform: skewX(-25deg);
      pointer-events: none;
}

.btn-social.oneclick:hover::after {
      animation: oneclick-shine 0.8s ease infinite;
}

@keyframes oneclick-shine {
      0% {
            left: -150%;
      }

      100% {
            left: 150%;
      }
}


.log-cont .btn-social.oneclick {
      width: fit-content;
      margin: 10px auto;
}

.form .country-select.inside li div {
      flex: unset !important
}

.country-select.inside {
      margin: unset !important;
}

.country-select.inside .form-control:disabled,
.country-select.inside .form-control[readonly] {
      background:transparent !important;
}

.country-select.inside .flag-dropdown .country-list li {
      outline: unset !important;
      border: unset !important;
      transition: .3s ease-in-out !important;
      position: unset !important;
      box-shadow: unset !important;
      overflow: unset !important;
      font-weight: unset !important;
      margin: unset !important;
}

/* end Social one click register buttons */
#main-currency{
      z-index: 99999 !important;
}#main-currency #close-popup{
 background: var(--bs-blue) !important;
}#main-currency .currency .btn p{
      margin: 0 !important;
}