/* Auto-extracted page CSS from j8win PHP <style> blocks */
.swal2-popup.swal2-toast .swal2-validation-message {
            font-size: 1em
        }
.swal2-validation-message {
            align-items: center;
            justify-content: center;
            margin: 0 -2.7em;
            padding: .625em;
            overflow: hidden;
            background: #f0f0f0;
            color: #666;
            font-size: 1em;
            font-weight: 300
        }
.swal2-validation-message::before {
            content: "!";
            display: inline-block;
            width: 1.5em;
            min-width: 1.5em;
            height: 1.5em;
            margin: 0 .625em;
            border-radius: 50%;
            background-color: #f27474;
            color: #fff;
            font-weight: 600;
            line-height: 1.5em;
            text-align: center
        }
.check-in-col img {
    max-width: 100px;
    margin: 10px auto;
}
.mobile-view .check-in-section .check-in-m-container .check-in-col .btn {
    display: flex
;
    align-items: center;
    height: 1.25rem;
    width: unset;
    min-width: unset;
    font-size: .63rem;
    padding: 0 .25rem;
    margin-bottom: .5rem;
}
.register-section .x-container-no-m .forget-password-wrap {
    width: 30%;
    min-height: 100vh;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
#popup-message {
    margin-bottom: 20px;
}
.register-section {
    background-image: linear-gradient(0deg, #f6faff 90%, #becaec);
}
.register-section .x-container-no-m {
    padding: 5rem 0;
}
.register-section .x-container-no-m .col-8 {
    box-shadow: 0 4px 12px 0 rgba(107, 123, 168, .25);
    background: #fff;
    border-radius: 1rem;
    padding: 0;
    width: 65%;
    height: auto;
    overflow: hidden;
}
.register-section .logreg-img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    border: .3125rem solid #fff;
    display: block;
    object-fit: contain;
    background: transparent;
}
.register-section .x-container-no-m .col-4 {
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 12px 0 rgba(107, 123, 168, .25);
    background: transparent;
    width: 33%;
    display: flex;
    align-items: center;
}
.register-section .x-container-no-m .register-form {
    justify-content: center;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
}
.register-section .x-container-no-m .input-group {
    border-radius: 3.125rem;
    display: flex
;
    margin-top: .75rem;
}
.register-section .x-container-no-m .input-group .input-group-text {
    border: none;
    padding: 0;
}
.register-section .x-container-no-m .input-group .left-icon {
    background-color: unset;
    border-radius: 3.125rem 0 0 3.125rem;
    border: none;
    padding: .45rem !important;
    z-index: 1;
}
.input-group .input-group-text {
    color: #414755;
    background: transparent;
    position: relative;
}
.register-section .x-container-no-m .register-form {
    justify-content: unset;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
}
.register-section .x-container-no-m .register-form {
    width: 300px;
    min-height: unset;
    justify-content: center;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
}
/* Icon alignment inside input fields */
.input-group-text {
    border: none;
    background: transparent;
    padding: 0 10px;
}
.form-check-input {
    --bs-form-check-bg: var(--bs-body-bg);
    width: 1em;
    height: 1em;
    margin-top: .25em;
    vertical-align: top;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
    border: var(--bs-border-width) solid #007fff;
    -webkit-appearance: none;
    appearance: none;
    print-color-adjust: exact;
}
.register-section .x-container-no-m .register-form .checklist .small, .register-section .x-container-no-m .register-form .checklist small, .register-section .x-container-no-m .register-form .small-w .small, .register-section .x-container-no-m .register-form .small-w small, .register-section .x-container-no-m .register-form p {
    color: #000000;
}
.register-section .x-container-no-m .input-group .invalid-feedback {
    color: #ea4e3d;
    line-height: 1;
    text-align: center;
    margin-top: -2.6rem;
}
html:not(.j8-lucky-spin-page) .spin-content-reminder-title {
            font-size: 18px;
            color: black;
        }
html:not(.j8-lucky-spin-page) .spin-content-btn {
            padding: 10px;
            background-color: #FF5722;
            color: white;
            border: none;
            cursor: pointer;
        }
html:not(.j8-lucky-spin-page) .spin-content-btn:disabled {
            background-color: grey;
        }
html:not(.j8-lucky-spin-page) #spin {
            transition: transform 5s cubic-bezier(0.33, 1, 0.68, 1);
            transform-origin: center center;
            z-index: 3;
        }
html:not(.j8-lucky-spin-page) .lucky-wheel-landing-container .container-row-1 .lucky-wheel-wrapper .icon-2 {
                bottom: 10%;
                right: 0%;
            }
}


html:not(.j8-lucky-spin-page) .lucky-wheel-landing-container .container-row-1 .lucky-wheel-wrapper .icon-2 {
            position: absolute;
            width: 100%;
            bottom: 45%;
            right: 0%;
        }
html:not(.j8-lucky-spin-page) .lucky-wheel-landing-container .container-row-1 .lucky-wheel-wrapper .icon-1 {
                bottom: 84%;
                left: 81%;
                z-index: 2;
            }
html:not(.j8-lucky-spin-page) .lucky-wheel-landing-container .container-row-1 .lucky-wheel-wrapper .spin-container .lucky-wheel-btm-img {
            position: absolute;
            top: -.77rem;
            z-index: 2;
        }
.lucky-wheel-landing-container .container-row-1 .winner-content .winner-header {
    color: #fff;
    font-size: .24rem;
    text-align: center;
}
.term-section .term-container .card-shadow {
             padding: 2rem;
             background-color: #fff;
            border-radius: 0.75rem;
           }
.promo-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.promos-title {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: auto;
    height: 40px; /* Adjust as needed */
    z-index: 15;
}
.term-section table tr:first-child td {	
        background-color: #a1bee9;
         }
#chatroom .message {
    overflow: hidden;
    margin: 5px;
}
#chatroom .message .message-wrapper {
    display: block;
    background: rgba(0, 0, 0, .4);
    padding: 8px 10px 10px;
    border-radius: 5px;
    color: #fff;
    width: 100%;
    text-transform: none;
}
#chatroom .message .name {
    display: revert;
    color: #9CCC65;
}
#chatroom .message .text {
    display: block;
    margin-top: 5px;
}
/* Message container styles for alignment */
.message.staff {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    position: relative; /* Needed to position time correctly */
}
.message.user {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
    position: relative; /* Needed to position time correctly */
}
/* Message wrapper styles */
.message-wrapper {
    max-width: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    color: #fff;
    text-transform: none;
    position: relative;
    margin-bottom: 15px; /* Space between messages */
}
/* Different background colors for user and staff */
.message.staff .message-wrapper {
    background: rgba(102, 187, 106, .8); /* Switched background color */
    margin-right: 10px;
}
.message.user .message-wrapper {
    background: rgba(0, 0, 0, .4); /* Switched background color */
    margin-left: 10px;
}
.message.staff .time {
    right: 0; /* Switched position to right for staff messages */
}
.message.user .time {
    left: 0; /* Switched position to left for user messages */
}
/* Align text inside message */
.message.staff .name,
.message.staff .text {
    text-align: right;
}
.message.user .name,
.message.user .text {
    text-align: left;
}
.swal2-popup.swal2-toast .swal2-validation-message {
      font-size: 1em
    }
.swal2-validation-message {
      align-items: center;
      justify-content: center;
      margin: 0 -2.7em;
      padding: .625em;
      overflow: hidden;
      background: #f0f0f0;
      color: #666;
      font-size: 1em;
      font-weight: 300
    }
.swal2-validation-message::before {
      content: "!";
      display: inline-block;
      width: 1.5em;
      min-width: 1.5em;
      height: 1.5em;
      margin: 0 .625em;
      border-radius: 50%;
      background-color: #f27474;
      color: #fff;
      font-weight: 600;
      line-height: 1.5em;
      text-align: center
    }
.total-reward {
     font-size: 35px;
    }
.term-section {
    background-color: #f5f5f5; /* Add a background color */
    padding: 20px; /* Add some padding */
  }
.term-container {
    background-color: #ffffff; /* Add a background color */
    padding: 20px; /* Add some padding */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    border-radius: 5px; /* Add rounded corners */
  }
.register-section .x-container-no-m .register-form {
    width: 300px;
    min-height: 45vh; 
    justify-content: center;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
}
.logreg-img {
    max-width: 100%;
    height: auto;
    display: block;
}
.register-section.register-m-section .x-container-no-m .register-form .nav-tabs .nav-link {
    text-align: center;
    padding: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: #777777;
    color: #414755;
    border: none;
    margin-bottom: -.0625rem;
}
.lucky-wheel-landing-container {
                padding: 0rem 0 .68rem;
                */
            }
/* Bottom nav skin lives in app/(j8)/j8.css (2U black/gold). Keep layout-only fallback. */
.bottom-nav-section .bottom-nav-content {
    width: 100%;
    height: 3.5rem;
    display: flex;
    justify-content: space-around;
    margin: 0;
    align-items: center;
    padding-left: 0;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.pi-m-info .user-profile-container .vip-icon {
        right: 20%;
        }
/* CSS for spacing between wallet-transfer elements */
.wallet-transfer {
    margin-bottom: 65px; /* Add margin to create spacing between elements */
}
.swal2-popup.swal2-toast .swal2-validation-message {
  font-size: 1em
}
.swal2-validation-message {
  align-items: center;
  justify-content: center;
  margin: 0 -2.7em;
  padding: .625em;
  overflow: hidden;
  background: #f0f0f0;
  color: #666;
  font-size: 1em;
  font-weight: 300
}
.swal2-validation-message::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 .625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center
}
.promos-m-content {
    padding: 10px;
    text-align: left;
}
.promo-title {
    font-size: 1rem;
    color: #414755;
    margin-bottom: .2rem;
}
.promo-description {
    font-size: .75rem !important;
    color: #abb8d6 !important;
}

.promos-m-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px;
}
.register-section .x-container-no-m .register-form {
    width: 300px;
    min-height: 58vh; 
    justify-content: center;
    margin: 0 auto;
    display: flex
;
    flex-direction: column;
}
/* VIP mobile header — keep old navy bar (do not strip like 2U) */
.vip-m-table h3,
.vip-m-table .h3 {
  color: #fff !important;
  background-color: #6b7ba8 !important;
  margin-bottom: unset !important;
  padding: 1.2rem !important;
  border-radius: 1.25rem 1.25rem 0 0 !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}
.pf-m-dashboard .input-group-col .form-check.form-check-inline .form-check-label {
    max-width: 100%;
    min-width: 100%;
}

/* Popular Events: legacy CSS forced .col-4 to 37.3125rem (sport list).
   Promo-image layout left a huge empty white band under Deposit Now. */
.events-section.live-sport-event .events-video-container .events-video-content {
  padding: 1.25rem;
}
.events-section.live-sport-event .events-video-container .events-video-content .col-4 {
  height: auto;
}
.events-section.live-sport-event .events-video-container .events-video-content .col-4::after {
  display: none;
}
.events-section.live-sport-event .events-video-container .events-video-content .row {
  align-items: flex-start;
}

/* Deposit: label/control rows + bank option tiles */
.pd-card-col .forms-col > .row,
.pd-card-col .forms-col > .row.deposit-receiver-row {
  align-items: center;
}
.pd-card-col .forms-col > .row > .col-form-label {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  align-items: center;
  min-height: 2.5rem;
}
.select-bank-opts.deposit-receiver-banks {
  grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
  max-width: 36rem;
}
.select-bank-opts.deposit-receiver-banks .form-check-inline .form-check-label {
  height: auto;
  min-height: 4.5rem;
  padding: 0.45rem 0.35rem;
  justify-content: center;
}
.select-bank-opts.deposit-receiver-banks .form-check-inline .form-check-label p {
  text-transform: none;
  line-height: 1.15;
  margin: 0;
  max-height: 2.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  text-align: center;
}
.pd-card-col .forms-col .input-group.right .input-group-text {
  display: flex;
  align-items: center;
}