/* 修正 body 的 overflow，确保底部边框不会被裁掉 */
#body-main {
  overflow: visible !important;
  margin: 0;
  padding: 0;
}

#body-main #language-box .lng {
  display: block;
  position: relative;
  overflow: hidden;
  padding: 15px;
  border-bottom: 1px solid #ffc107;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  border-radius: 0px !important;
}
#body-main #language-box .lng:last-child {
  border-bottom: 0;
}
#body-main #language-box #lng-check {
  color: #ffc107;
  margin: 0px 5px;
}

/** =============================================================== */
/** home */
#home-balance-container {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  padding: 8px;
  background:url("https://igamematrix-demo-single.s3.ap-northeast-1.amazonaws.com/public/setting_display/239e894c-fd82-42a4-990f-13d03634e2071763435862.png") center center / 100% 100% no-repeat;
}
#balance-wrapper-progress-bar-container {
  background-color: #ffffff;
  border-radius: 200px;
  width: 100%;
  margin: 8px 0px;
}
#balance-wrapper-progress {
  min-height: 6px;
  background: #ae00fb;
  border-radius: 200px;
  height: 100%;
}

#body-main .share-popup-container {
  --horizontal-spacing: 37.5px;
  --max-popup-width: 300px;
  --popup-inner-padding: 15px;
  background: #000;
  border-radius: 4px;
  color: #fff;
  border: 1px solid #ffc107;
}
#body-main #share-popup .header-title {
  color: #ffc107;
  font-weight: 700;
  line-height: 1.25;
}
#body-main #share-popup .refer-code {
  font-size: 13px;
  border-bottom: 1px solid #ffc107;
  margin: 5px 0 15px;
  padding-bottom: 5px;
}
#body-main #qr {
  max-width: 180px;
  max-height: 180px;
  background: white;
  padding: 10px;
  border-radius: 10px;
}
#body-main #share-qr-note {
  font-size: 11px;
  text-align: center;
  color: #999;
  text-transform: none;
  margin: 10px 0;
}

/** =============================================================== */
/** history */
#body-main #btn-history-bet,
#body-main #btn-history-transaction {
  float: left;
  text-align: center;
  background: #37474f;
  padding: 8px 14px;
  cursor: pointer;
  margin-right: 10px;
  border-radius: 4px;
  font-weight: 700;
  color: #fff;
}
#body-main #btn-history-bet.selected,
#body-main #btn-history-transaction.selected {
  background: #546e7a;
}
#body-main #history-balance-wrapper {
  text-align: center;
  line-height: 1.25;
  padding: 20px 20px 24px 20px;
  font-weight: 500;
  background: linear-gradient(93deg, #ae00fb 0%, #3c68f2 100%);
  color: #fff;
}
#body-main #history-bet-header {
  text-align: start;
  line-height: 1.2;
  padding: 10px 16px;
  font-weight: 500;
  background: linear-gradient(
    90deg,
    #6a11cb 0%,
    #8e2de2 25%,
    #9d50bb 50%,
    #8a2be2 75%,
    #6f00ff 100%
  );
  color: #fff;
}

/** =============================================================== */
/** 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

#promotion-popup,
#promotion-popup * {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
}

/** popup 文字大小 **/
#promotion-popup {
  font-size: 20px !important;
  line-height: 1.5;
}

#promotion-popup .title,
#promotion-popup h1,
#promotion-popup h2 {
  font-size: 18px !important;
  font-weight: 700;
}

/** promotion */
#promotion-popup {
  max-width: 600px;
  margin: 20px auto;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: inset 0 0 10px #000;
  position: relative;
  overflow: hidden;
  background-position: center;
  background: linear-gradient(45deg, #6923ec, #39029c, #6923ec);
  animation: fadeInBackground 14s infinite;
  background-size: cover;
  background-position: right;
  background-size: cover;
  border: 2px solid #0000FF;
  filter: brightness(1.3);
  animation: bgAnimation 5s infinite;
  background: #000 url("https://i.postimg.cc/Kjk0YzRN/3463606.jpg") center/cover no-repeat;
}

#promotion-popup-cancel {
  padding: 8px 0;
  border-color: #c62828;
  background-color: #f44336;
  background-image: linear-gradient(to bottom, #f44336, #b71c1c);
  width: 110px;
  color: #fff;
}

#promotion-popup-confirm {
  padding: 8px 0;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  background-color: #4ba614;
  background-image: linear-gradient(to bottom, #4ba614, #008c00);
  cursor: pointer;
  width: calc(100% - 120px);
  margin-left: 10px;
}





/** =============================================================== */
/** chatroom */
body:has(#app) { background: transparent; }
#app .v-application { background: transparent; }

#app .embed-header { background: black; display: none; }

#app .embed-chat-container {
  background: transparent;
  background: rgba(255, 255, 255, 0.5);
}

#app .embed-content {
  background: transparent;
  height: 100%;
}

#app .embed-messages {
  background: transparent;
  padding: 16px 16px;
  padding-bottom: 48px;
  row-gap: 0px;
}

#app .message-avatar { display: none; }

#app .bot-message-content,
#app .bot-message,
#app .own-message-container > div,
#app .own-message,
#app .system-message,
#app .message-card {
  width: 100%;
  max-width: 100%;
  border-radius: 5px;
}

#app .message-card,
#app .system-message {
  border: none;
  background: rgba(0, 0, 0, 0.4) !important;
  max-width: 100% !important;
  color: white !important;
}

#app .bot-message-content .username {
  color: black !important;
  font-size: 15px !important;
  line-height: 1.25;
}

#app .message-card.own-message .username {
  color: #ea1520 !important;
  font-size: 15px !important;
  line-height: 1.25;
}

#app .message-content-other,
#app .message-content-admin {
  color: #fff !important;
}

/** 输入框 */
#app .message-input-container {
  color: white;
  background: transparent;
  padding: 5px 5px 6px;
  border: none;
}

#app .message-input-container .v-card-text {
  padding: 0px !important;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
}

#app .message-input-container .v-input .v-field__outline::before,
#app .message-input-container .v-input .v-field__outline::after {
  border: none;
  display: none;
}

#app .message-input-container .v-input .v-field__overlay { background: transparent; }

#app .message-input-container input {
  min-height: 40px;
  padding: 10px 0px 10px 15px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
}

#app .message-input-container .v-btn:has(.mdi-send) {
  margin-left: 0px !important;
  order: 1;
}

#app .message-input-container .v-btn[aria-label*="Send"],
#app .message-input-container .v-btn .mdi-send {
  color: #ea1520;
  font-size: 24px;
}

#app .message-input-container .v-btn:has(.mdi-upload) {
  order: 2;
  margin-left: 0px !important;
  margin-right: 10px;
}

#app .message-input-container .v-btn[aria-label*="Upload"],
#app .message-input-container .v-btn .mdi-upload {
  color: #ea1520;
  font-size: 24px;
}

/** =============================================================== */
/** setting */
#body-main #setting-container {
  padding: 10px 10px 0;
  line-height: 1.25;
}
#body-main .setting-header-title {
  color: #f58611;
  border-bottom: 2px solid;
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 10px;
}
#body-main .setting-header-title.title-2 {
  margin-bottom: 0px;
}
#body-main #user-detail-container {
  font-size: 15px;
  margin-bottom: 20px;
}
#body-main .btn-setting {
  text-align: start;
  font-weight: 700;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  justify-content: left;
  border-radius: 0;
}

/** =============================================================== */
/** register */
#body-main #register-verify-code-conatiner {
  background-color: rgb(55, 71, 79);
  margin-top: 10px;
  font-size: 13px;
  color: rgb(255, 255, 255);
  padding: 10px;
  overflow: hidden;
  border-radius: 5px;
}
#body-main #register-send-top-btn {
  display: block;
  font-size: 15px;
  text-shadow: rgba(0, 0, 0, 0.3) -1px -1px 0px;
  text-align: center;
  cursor: pointer;
  padding: 8px 0px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  background-color: rgb(234, 185, 45);
  background-image: linear-gradient(rgb(234, 185, 45), rgb(199, 152, 16));
  border-color: rgb(203, 155, 20);
  width: 120px;
  min-height: 40px;
  font-weight: 700;
}

#body-main #register-submit-btn {
  display: block;
  padding: 8px 0;
  border: 1px solid #34740e;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  border-color: #25729a;
  background-color: #3093c7;
  background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
  min-height: 40px;
  font-weight: 700;
}

/** =============================================================== */
/** login */
#body-main #login-title {
  font-size: 23px;
  color: #ffc107;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.25;
}

#body-main #login-submit-btn {
  padding: 8px 0;
  border: 1px solid #34740e;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
  background-color: #4ba614;
  background-image: linear-gradient(to bottom, #4ba614, #008c00);
  cursor: pointer;
  line-height: 20px;
  font-weight: 700;
}

#body-main #login-register-btn {
  margin: 20px auto 5px;
  padding: 8px 0;
  border: 1px solid #34740e;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  line-height: 20px;
  border-color: #25729a;
  background-color: #3093c7;
  background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
  color: #fff;
  width: 150px;
  font-weight: 700;
}

#body-main .form-wrapper input::placeholder {
  color: #a9a9a9 !important;
}

/** =============================================================== */
/** resetPassword */
#body-main #resetPassword-title {
  color: #ffc107;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid;
  padding-bottom: 10px;
  margin-bottom: 20px;
  line-height: 1.25;
  text-transform: uppercase;
}

#body-main #resetPassword-submit-btn {
  display: block;
  padding: 8px 0;
  border: 1px solid #34740e;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  border-color: #25729a;
  background-color: #3093c7;
  background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
  min-height: 40px;
  font-weight: 700;
}

/** =============================================================== */
/** add bank */
#body-main #add-bank-title {
  color: #ffc107;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid;
  padding-bottom: 10px;
  margin-bottom: 20px;
  line-height: 1.25;
  text-transform: uppercase;
}

#body-main #add-bank-submit-btn {
  display: block;
  padding: 8px 0;
  border: 1px solid #34740e;
  border-radius: 4px;
  font-size: 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  text-align: center;
  cursor: pointer;
  border-color: #25729a;
  background-color: #3093c7;
  background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
  min-height: 40px;
  font-weight: 700;
}

/** =============================================================== */
/** deposit */
#body-main #btn-deposit-submit {
  font-weight: 700;
}

#body-main #btn-deposit-cancel {
  font-weight: 700;
}

/** =============================================================== */
/** leaderboard */
#body-main #leaderboard-title {
  color: #ffc107;
  border-bottom: 2px solid;
  padding-bottom: 5px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}

#body-main #board-leaderboard {
  padding: 10px;
  font-size: 12px;
}

#body-main #btn-leaderboard {
  background: #37474f;
  color: #fff;
  line-height: 1 !important;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
}

#body-main #btn-leaderboard.selected {
  background: #546e7a;
}

#body-main #board-leaderboard #container-btn-date {
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

#body-main #leaderboard-note {
  text-transform: none;
  margin: 10px 0px;
  color: white;
  font-size: 12px;
}

#body-main #leaderboard-table-container { padding: 0 15px; }

#body-main #leaderboard-table td {
  padding: 5px;
  border: 1px solid #ccc;
  line-height: 1.25;
}

#body-main #leaderboard-table .table-head-item {
  background: #1d2531;
  color: #fff;
}

/** =============================================================== */
/** downline */
#body-main #downline-btn-container {
  column-gap: 5px;
  padding: 10px 5px;
}

#body-main .btn-downline {
  background: #333;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}

#body-main .btn-downline.selected { background: #ff9800; }

/* filter */
#body-main #filter-container {
  display: flex;
  align-items: center;
  column-gap: 5px;
  background: #ccc;
  padding: 5px;
  font-size: 15px;
  line-height: 1.25;
}

#body-main #downline-dropdown-btn,
#body-main #commission-dropdown-btn,
#body-main .commission-date-picker-btn {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  background: white;
  border-radius: 4px;
  border: 1px solid #bbb;
  line-height: 1.25;
}

#body-main #commission-dropdown-btn,
#body-main .commission-date-picker-btn,
#body-main .commission-date-picker-btn input {
  height: 38px;
}

#body-main #btn-commission-search {
  background-image: linear-gradient(to bottom, #fd0000, #8c0000);
  color: #fff;
  text-shadow: 0px 0px 10px #ea1520, 0px 0px 5px #ea1520, 0px 0px 1px #ea1520;
  border-radius: 20px;
  border: 0;
  box-shadow: 1px 1px 5px #ea1520;
  font-size: 13px;
  min-width: 80px;
  padding: 11px 0;
  text-transform: uppercase;
  width: 22%;
}

/* table */
#body-main #table-downline-commission {
  font-size: 13px;
  line-height: 1.25;
  color: white;
  --border-color: white;
}

#body-main #table-downline-commission tr {
  vertical-align: top;
}

#body-main #table-downline-commission td {
  padding: 3px 5px;
}

#body-main #table-downline-commission .title-row,
#body-main #table-downline-commission .detail-row {
  border: 1px solid var(--border-color);
}

#body-main #table-downline-commission .title-row {
  background: #1d2531;
  font-weight: 700;
  text-transform: uppercase;
}

/* pagination */
#body-main #table-downline td:nth-child(1) { width: 1%; }

#body-main #downline-pagination {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 5px;
}

#body-main #downline-pagination .btn-pagination:not(.btn-ellipse),
#body-main #downline-pagination .pagination-input {
  border-color: #444;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgb(255, 255, 255), 0 0 2px rgba(0, 0, 0, 0.3) inset;
  cursor: default;
  background: #eee;
  padding: 0 9px;
  color: #666 !important;
  height: 27px !important;
  text-transform: capitalize;
}

#body-main #downline-pagination .btn-ellipse {
  height: 27px !important;
  color: #fff !important;
}

#body-main #downline-pagination .btn-pagination.active {
  background: #ff9800;
  box-shadow: none;
  color: #fff !important;
}

/** commission */
#body-main .commission-date-picker-btn { width: calc(26% - 5px); }

#body-main #table-commission .win-text { color: yellow; }
#body-main #table-commission .lose-text { color: red; }

/** report */
#body-main #table-report td:last-child { width: 1%; }

/** =============================================================== */
/** CHATROOM – FULL CUSTOM THEME */
/** =============================================================== */

/* Remove page background */
body:has(#app) {
  background: transparent !important;
}

#app .v-application {
  background: transparent !important;
}

/* Hide chatroom header */
#app .embed-header {
  display: none !important;
}

/* Chatroom main container background (CHANGE THIS COLOR HERE) */
#app .embed-chat-container {
  background: rgb(30,58,138) !important; /* ★ Change background color */
}

/* Chatroom body container */
#app .embed-content {
  background: transparent !important;
  height: 100%;
}

/* Chat messages container */
#app .embed-messages {
  background: transparent !important;
  padding: 16px;
  padding-bottom: 60px;
  row-gap: 6px;
}

/* Hide avatar icons */
#app .message-avatar {
  display: none !important;
}

/* Message bubble resize */
#app .bot-message-content,
#app .bot-message,
#app .own-message-container > div,
#app .own-message,
#app .system-message,
#app .message-card {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 6px !important;
}

/* Message bubble background */
#app .message-card,
#app .system-message {
  border: none !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #ffffff !important;
}

/* Bot username */
#app .bot-message-content .username {
  color: #ffffff !important;
  font-weight: bold;
  font-size: 15px !important;
}

/* User username */
#app .message-card.own-message .username {
  color: #ea1520 !important;
  font-weight: bold;
  font-size: 15px !important;
}

/* Other message text */
#app .message-content-other,
#app .message-content-admin {
  color: #ffffff !important;
}

/* Input area wrapper */
#app .message-input-container {
  background: transparent !important;
  padding: 5px 8px 10px;
  border: none !important;
  color: #ffffff !important;
}

/* Input field background */
#app .message-input-container .v-card-text {
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border-radius: 20px !important;
}

/* Remove default input underline */
#app .message-input-container .v-input .v-field__outline::before,
#app .message-input-container .v-input .v-field__outline::after {
  display: none !important;
}

/* Input overlay */
#app .message-input-container .v-input .v-field__overlay {
  background: transparent !important;
}

/* Input text style */
#app .message-input-container input {
  min-height: 40px;
  padding: 10px 15px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

/* Send button container */
#app .message-input-container .v-btn:has(.mdi-send) {
  margin-left: 0 !important;
  order: 1;
}

/* Send button icon */
#app .message-input-container .v-btn[aria-label*="Send"],
#app .message-input-container .v-btn .mdi-send {
  color: #31a63a !important;
  font-size: 24px !important;
}

/* Upload button container */
#app .message-input-container .v-btn:has(.mdi-upload) {
  margin-left: 0 !important;
  margin-right: 10px !important;
  order: 2;
}

/* Upload button icon */
#app .message-input-container .v-btn[aria-label*="Upload"],
#app .message-input-container .v-btn .mdi-upload {
  color: #1e3a8a !important;
  font-size: 24px !important;
}

/** =============================================================== */
/** END CHATROOM CUSTOM THEME */
/** =============================================================== */