::selection {
      background: var(--color);
      color: var(--txt-yellow);
}

.center-contant {
      width: 100%;
      overflow: hidden;
      background: var(--block);
      min-height: 550px;
      padding: 20px;
      margin-bottom: 30px;
      border-radius: 10px;
}

.center-tab {
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      padding: 0 0 .02rem 0;
}

.center-tab a {
      background: var(--txt);
      padding: .1rem .2rem;
      display: block;
      height: 40px;
      text-align: center;
      font-weight: 600;
      color: var(--fff);
}

.center-tab a:hover {
      background: var(--txt-yellow);
      border-bottom: 3px solid #fff
}

.center-tab a.active {
      background: var(--txt-yellow);
      border-bottom: 3px solid var(--color)
}

.center-title h3,
.main-withdraw .title h3 {
      font-size: 16px;
      color: var(--txt-yellow);
}

.center-title h3:after {
      content: "";
      border-bottom: 3px solid var(--color);
      width: 100px;
      display: block;
      padding: 2px;
}

.main-withdraw h3:after {
      content: "";
      border-bottom: 3px solid var(--color);
      /* width: 100px; */
      display: block;
      padding: 2px;
}

/*pitch*/
.pitch {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* border: 2px var(--red) solid; */
      border-radius: 10px;
      opacity: 0;
      overflow: hidden;
}

.pitch i {
      color: white;
      font-size: 24px;
      background-color: var(--red);
      position: absolute;
      right: 0;
      border-radius: 0 0 0 30px;
      width: 30px;
      height: 30px;
}

.main-withdraw .bank .with-bank {
      width: unset;
      float: left;
      padding-right: .1rem;
}

.main-withdraw .bank .with-bank img {
      padding: .05rem;
      border-radius: .1rem;
}

.bank {
      overflow: hidden;
}

.bank li a {
      width: .9rem;
      height: .9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 1px solid #fff;
      border-radius: 10px;
      cursor: pointer;
}

.bank li a:hover,
.bank li a.active {
      border: 1px solid var(--color);
}

.bank li a>i {
      width: 60px;
      height: 60px;
      line-height: 60px;
      display: block;
      border-radius: 100%;
      font-size: 48px;
      color: white;
}

.bank li a.active .pitch {
      opacity: 1;
}

.main-withdraw .form-group-item span {
      width: 200px !important;
      color: var(--txt-yellow);
}

.main-withdraw .form-group-item select,
.main-withdraw .form-group-item input {
      border: 1px solid #ccc;
      width: 500px;
      /* background-color: var(--txt);
      cursor: not-allowed; */
}

.main-withdraw .form-group-item select:focus,
.main-withdraw .form-group-item input:focus,
.main-withdraw .form-group-item select:hover,
.main-withdraw .form-group-item input:hover {
      border: 1px solid var(--txt-yellow);
}

/*pay*/
.main-withdraw .pay input:focus,
.main-withdraw .pay input:hover {
      border: 1px solid var(--txt-yellow);
}

.main-withdraw .pay {
      width: 700px;
}

.main-withdraw .pay input {
      border-radius: 5px;
      height: 70px;
      font-size: 30px;
      color: var(--yellow);
      border: 1px solid #ccc;
      font-weight: bold;
}

.main-withdraw .pay-cont {
      display: inline-block;
      padding: .1rem 0
}

.main-withdraw .pay-cont li {
      float: left;
      width: 100px;
}

/* .main-withdraw .pay-cont li:not(:last-child) {
      margin-right: 20px;
} */

.main-withdraw .pay-cont li a {
      width: 98px;
      height: 44px;
      background-image: -webkit-linear-gradient(top, #f4f3f3, #e6e6e6);
      background-image: -moz-linear-gradient(top, #f4f3f3, #e6e6e6);
      background-image: -ms-linear-gradient(top, #f4f3f3, #e6e6e6);
      background-image: -o-linear-gradient(top, #f4f3f3, #e6e6e6);
      background-image: linear-gradient(top, #f4f3f3, #e6e6e6);
      -webkit-transition: background-color .2sease-out;
      -moz-transition: background-color .2s ease-out;
      -ms-transition: background-color .2s ease-out;
      -o-transition: background-color .2s ease-out;
      transition: background-color .2sease-out;
      background-clip: padding-box;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid var(--txt-yellow);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #858585;
      font-size: 14px;
      margin: .02rem;
}

.main-withdraw .pay-cont li a:hover {
      background-color: var(--color);
}

.main-withdraw .form-group-item #verify_code {
      width: 360px;
}

.main-withdraw .form-group-item .btn.otp {
      width: 135px;
      margin-left: 5px;
}

body[data-pages="update_bonus_list"] .center-submit {
      margin-left: 4rem !important;
}

.center-form .report-item {
      border: 1px solid #ccc;
}

.center-form .report-item:hover {
      border: 1px solid var(--txt-yellow);
}

@media(max-width: 640px) {
      .overview-subcontainer{
            margin: .1rem !important;
      }
      body[data-pages="update_bonus_list"] .center-submit {
            margin-left: 1.5rem !important;
            width: 100%;
      }

      body[data-pages="gift"] .lang {
            margin-top: unset !important;
            padding-top: unset !important;
      }

      body[data-pages="gift"] .logo {
            width: unset !important;
      }

      body[data-pages="gift"] .left-table {
            width: 100% !important;
            margin: unset !important;
            overflow: auto;
      }

      .center-tab a {
            padding: .2rem;
            color: var(--fff);
            width: 25%;
            overflow: hidden;
            border-radius: 10px;
            -webkit-transform: translateY(0);
            transform: translateY(0);
            transition: transform .3s, -webkit-transform .3s;
            flex: calc(100% / 4);
            display: block;
            box-sizing: border-box;
            border: 1px #ffbe6b solid;
            border-radius: 0.15rem;
      }

      .center-tab {
            padding: 0.2rem 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            gap: 5px;
        }

      .main-withdraw .form-group-item .btn.otp {
            width: 1.5555rem;
            height: 45px;
            white-space: nowrap;
      }

      .main-withdraw .form-group-item .btn-submit {
            width: 100%;
            margin: .3rem 0 !important;
      }

      .main-withdraw .form-group-item #verify_code {
            width: 4.3rem
      }

      /*pitch*/
      .pitch {
            border-radius: .1rem;
      }

      .pitch i {
            font-size: .3rem;
            border-radius: 0 0 0 .4rem;
            width: .4rem;
            height: .4rem;
      }

      /*bank*/
      .bank li {
            padding: .05rem;
      }

      .bank li a {
            width: 1rem;
            height: 1rem;
            border-radius: .1rem;
      }

      .bank li a>i {
            width: .7rem;
            height: .7rem;
            line-height: .7rem;
            font-size: .5rem;
      }

      .center-contant {
            padding: .1rem;
            margin: 1rem 0;
      }

      .main-withdraw .form-group-item {
            display: block;
      }

      .main-withdraw .pay,
      .main-withdraw .form-group-item span,
      .main-withdraw .form-group-item select,
      .main-withdraw .form-group-item input {
            width: 100%;
      }

      /*pay*/

      .main-withdraw .pay input {
            border-radius: .1rem;
            height: 1rem;
            font-size: .4rem;
            padding: 0 .2rem;
            font-weight: bold;
      }

      .main-withdraw .pay-cont {
            padding: .2rem 0;
      }

      /* .main-withdraw .pay-cont li:not(:last-child) {
            margin-right: .1rem;
      } */

      .main-withdraw .pay-cont li a {
            line-height: .7rem;
            font-size: .2rem;
            border-radius: .1rem;
      }

      .main-withdraw .pay-cont li {
            width: unset;
      }

      .main-withdraw .pay-cont li a {
            width: 1.46rem;
      }

}

/* other  with*/
.tip-withdraw {
      background-color: var(--block);
      border-radius: 10px;
      color: var(--txt);
}

.checking_turnover_desc {
      margin-top: 10px;
      color: #fff;
      padding-bottom: 5px;
}

.btn-check-turnover-tn {
      color: #000;
      font-weight: normal;
      background: var(--color);
      border: 1px solid var(--color);
      width: 150px;
      float: right;
      text-align: center;
      line-height: 30px;
      padding: 8px;
      cursor: pointer;
      color: #fff;
      font-size: 20px;
      border-radius: 4px;
}

.btn-check-turnover {
      color: #fff;
      font-weight: normal;
      background: var(--color);
      border: 1px solid var(--color);
}

.refresh-turnover {
      background-color: var(--color);
      color: #fff;
      width: 352px;
      height: 60px;
      text-align: center;
      line-height: 50px;
      position: relative;
      border-radius: 4px;
      text-transform: capitalize;
      display: flex;
      align-items: center;
      justify-content: left;
      padding: 0 10px;
      user-select: none;
      line-height: 24px;
}

.refresh-turnover .myTurnover {
      color: #fff;
      padding-left: 5px;
      font-weight: bold;
      padding-right: 5px;
}

/**** modal***/
#modal-check-turnover .modal-header h3 {
      color: #fff;
      text-align: center;
      width: 100%;
      font-size: 15pxvh;
}

.bill-item {
      border-bottom: 1px solid #303F54;
}

#modal-check-turnover .modal-content {
      background-color: #6994ec;
      margin-top: -100px;
}

#modal-check-turnover .modal-header {
      background: linear-gradient(to right, #5099F2, #2F33B7);
      padding: 0px 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
}

#modal-check-turnover .modal-body {
      background-color: #222B3D;
      text-align: left;
      padding: 50px;
      overflow-y: auto;
      height: 700px;
}

#modal-check-turnover .modal-header {
      border-bottom: transparent;
}

.bill-field-item div {
      display: inline-block;
      line-height: 70px;
      font-size: 16px;
}

#modal-check-turnover .flex-between {
      justify-content: space-between;
}

#modal-check-turnover .justify-left {
      text-align: left;
      width: 49%;
      color: #fff;
}

#modal-check-turnover .justify-right {
      text-align: right;
      width: 50%;
      color: #fff;
}

#modal-check-turnover .bill-success {
      background-color: #4f3fc5;
      color: #fff;
      border-radius: 2.60417vh;
      display: inline-block;
      text-align: center;
      line-height: 40px;
      width: 100px;
      height: 40px;
      float: right;
}

#modal-check-turnover .status-success {
      color: #00973c;
}

.bill-required {
      background-color: #ad263c;
      color: #fff;
      border-radius: 2.60417vh;
      display: inline-block;
      text-align: center;
      line-height: 50px;
      width: 100px;
      float: right;
}

#modal-check-turnover hr {
      margin: 40px 0;
      border-top: 1px solid #303F54;
}

html:lang(th) .btn-check-turnover-tn {
      font-size: 14px
}

html:lang(cn) .btn-check-turnover-tn,
html:lang(ca) .btn-check-turnover-tn,
html:lang(tw) .btn-check-turnover-tn {
      height: 78px;
      line-height: 57px;
}

/* end other  */

.main .center .sider {
      width: 320px !important;
}

.bet_record_list select {
      border: 1px solid #ccc;
      width: 50%;
      margin: .2rem 0;
      border-radius: 5px;
      color: #fff;
      background: var(--txt);
}


.center-data .iturnover .btn.gradient.center-submit {
      height: 40px !important;
      display: block;
}

.turnover_checking .center-data {
      margin: .1rem 0;
}


.center.turnover_checking .iturnover input {
      width: .3rem;
      height: .2rem;
}

.num1 {
      border: 1px solid #ccc;
      color: var(--fff);
      width: 180px !important;
      height: 35px;
      text-align: center;
      color: #fff;
      background-color: var(--txt);
}

.center-data .end_time,
.center-data .start_time {
      background: unset !important;
}

.center-data span {
      color: var(--txt-yellow);
      overflow: hidden;
      white-space: nowrap;
}

.center.turnover_checking td {
      color: #fff;
}

.center.turnover_checking .turnover {
      padding: .1rem 0;
}

.center-data .table_turnover {
      margin-top: unset !important;
      border-spacing: unset !important
}

.center-data .inp {
      background: var(--txt);
      border: 1px solid #ccc;
      color: #fff;
      -webkit-box-flex: 0;
      -webkit-flex: 0 1 16%;
      -ms-flex: 0 1 16%;
      margin-left: 10px;
      box-shadow: none;
      outline: 0;
      cursor: pointer;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      height: 35px;
      -webkit-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      white-space: nowrap;
      margin-left: 0;
      margin-top: 15px;
      width: 127px;
      border-radius: 0;
}

.center-contant .transfer .form li p,
.center-contant .transfer .form li span {
      color: var(--txt-yellow);
}

.btn.gradient.center-submit {
      height: 45px !important;
}

/* table.msgbox tr {
      background: var(--color) !important;
} */
.table table thead th{
      background-color: #0a79fb !important;
}
table.msgbox th {
      color: #fff;
}

@media(max-width: 640px) {
      .center.turnover_checking .iturnover .checkbox {
            width: 2.5rem;
      }

      .btn-check-turnover{
            width: 100%;
      }

      .center-data .inp {
            margin: 0 0 .06rem 0;
      }

      .center-data .end_time,
      .center-data .start_time {
            background-color: unset;
      }

      .center.turnover_checking .center-data .table_turnover span {
            display: flex;
            padding: .2rem 0;
      }

      .center-data tr,
      .center-data td {
            display: block;
            text-align: left !important;
      }

      .bet_record_list select {
            width: 100%;
      }

      .center-contant .transfer .form li {
            padding: 0;
      }

      .center-data form {
            margin-left: unset !important;
      }

      .num1 {
            width: 100% !important;
      }

      .btn.gradient.center-submit {
            margin: .2rem 0 !important;
      }

      .s_right {
            float: unset !important;
      }

      .sdate,
      .sdate_input {
            margin-top: unset !important;
      }

      .s_right .q {
            margin: 0 .1rem;
      }

      .sdate_input .center-select {
            width: 100% !important;
      }

      .sdate_input {
            display: inline-block !important;
      }

      .center-select.s_statement select {
            width: 6rem !important;
      }
}

/* bet statment  */

.ref_link_name,
.ref_code_name {
      position: relative;
      border: 1px solid #ccc;
      border-radius: 5px;
}

.ref_link_name input,
.ref_code_name input {
      color: var(--txt-yellow);
}

.ref_link_name:hover,
.ref_code_name:hover {
      border: 1px solid var(--txt-yellow);
}

.center-select.s_statement {
      margin: .2rem 0;
}

.center-select.s_statement select {
      border: 1px solid #ccc;
      color: var(--txt-yellow);
      background: var(--txt);
      width: 350px;
}

.s_right .q a.active,
.s_right .q a:hover {
      color: var(--color) !important;
}

.s_right .q a {
      color: var(--yellow) !important;
}

.sdate,
.sdate_input {
      color: var(--yellow) !important;
}

/* change password page  */

body[data-pages="change_password"] .main-withdraw .form-group-item input {
      width: 400px;
}

body[data-pages="change_password"] .main-withdraw .form-group-item .ico-user {
      color: var(--block);
      position: relative;
      right: .35rem
}

body[data-pages="change_password"] .main-withdraw .form-group-item .password {
      position: relative;
      right: .35rem
}

body[data-pages="change_password"] .center-form input {
      border: 1px solid #ccc;
      border-radius: 8px;
      color: #fff;
}

body[data-pages="change_password"] .center-form span {
      color: var(--color)
}

body[data-pages="change_password"] .center-form label {
      margin: .1rem 0;
      display: block;
}

/* .spintxt {
      display: none;
} */

@media (max-width: 640px) {

      body[data-pages="change_password"] .main-withdraw .form-group-item span,
      body[data-pages="change_password"] .main-withdraw .form-group-item input {
            width: 100% !important;
      }

      body[data-pages="change_password"] .main-withdraw .form-group-item .password,
      body[data-pages="change_password"] .main-withdraw .form-group-item .ico-user {
            top: -0.7rem;
            left: 5.5rem;
      }

      body[data-pages="change_password"] .main-withdraw .form-group-item cite {
            display: block;
            position: relative;
            left: -.3rem;
      }

      .gift_leftmenu {
            width: 6.2rem !important;
            margin: .1rem;
      }

      .spintxt {
            font-size: .55rem !important;
      }

      .wheel_container .turnplate img.pointer {
            position: absolute;
            width: 30% !important;
            height: 38% !important;
            left: 34.8% !important;
            top: 26.3% !important;
            cursor: pointer;
      }

      .wheel_container {
            /* width: 100% !important; */
      }

      .wheel_div .turnplate {
            background-size: 100% 100% !important;
            position: relative;
            /* left: .4rem; */
      }

      body #gift-main .left-table .sub-date {
            color: #fff !important;
      }

      #gift-main .left-table .sub-date img {
            width: unset !important;

      }

      #gift-main .left-table .ui-datepicker-trigger {
            width: unset !important;
      }

      .wheel_div {
            width: 100% !important;
            height: 100% !important;
      }

      /* #left {
            width: 100% !important
      } */

      #gift-main .gift_list li {
            width: 3rem !important;
      }

      #gift-main .gift_list {
            overflow: auto;
            margin: unset;
            font-size: unset;
            padding: unset;
            text-align: unset;
            background: unset;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: .1rem;
            width: 6.3rem;
      }

      .gift_detail h2 {
            margin-left: unset !important;
      }

      #giftDetail {
            width: 6.2rem !important;
      }

      .gift_detail_info,
      .gift_detail h2,
      .gift_detail {
            width: 100% !important;
            min-width: 100% !important;
            padding: .05rem;
      }

      .gift_info_left img {
            width: 100% !important;
            height: 100% !important;
      }

      .footDiv {
            margin: unset !important;
      }
}

/* start transfer  */

.center-contant .transfer {
      padding: 20px;
      /* background: #ffffff; */
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      margin-top: 20px;
}

.center-contant .transfer label {
      display: flex;
      /* flex-direction: column; */
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 15px;
      color: #ffffff;
}

.center-contant .transfer label span {
      margin-bottom: 5px;
      font-weight: bold;
      color: #fff;
}

.center-contant .transfer .btn-refresh {
      display: block;
      padding: 10px;
      background: #f8f8f8;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-weight: bold;
      color: #333;
      height: 45px !important;
}

.center-contant .transfer .center-form-select {
      position: relative;
      display: block;
}

.center-contant .transfer .center-form-select select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      background: #fff;
      cursor: pointer;
      height: 45px;
}

.center-contant .transfer input[type="text"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      color: #ffffff;
      height: 45px;
}

.center-contant .transfer button.center-submit {
      width: 100%;
      padding: 12px;
      background: var(--color);
      border: none;
      border-radius: 5px;
      color: white;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
}

.center-contant .transfer button.center-submit:hover {
      background: linear-gradient(90deg, #0056b3, #003d80);
}

@media (max-width: 640px) {
      .center-contant .transfer {
            max-width: 100%;
            padding: 15px;
      }

      .center-contant .transfer label {
            font-size: 12px;
      }

      .center-contant .transfer input[type="text"],
      .center-contant .transfer .center-form-select select,
      .center-contant .transfer .btn-refresh {
            font-size: 12px;
            padding: 8px;
      }

      .center-contant .transfer button.center-submit {
            font-size: 14px;
            padding: 10px;
      }
}

/* end transter  */

/* start achievement */
#sidebar_ach,
#sidebar_ach ul {
      display: inline
}

#sidebar_ach .center-table-achievement tr {
      background: #ccc;
}
#sidebar_ach ul{
      background: var(--block);
}
#sidebar_ach ul div {
      /* display: block !important; */
      width: 100%;
}

.achievement_content {
      width: 100% !important;
}
#sidebar_ach .achievement_content #achievement_data img {
      padding: 50px;
  }
#sidebar_ach .list-unstyled.components {
      width: 300px !important;
}
#sidebar_ach ul li .s-item{
      border-radius: unset !important; 
}
@media(max-width: 640px) {
      #sidebar_ach .list-unstyled.components {
            display: inline
      }
      #sidebar_ach .achievement_content #achievement_data img {
            width: 15% !important;
            height: 15% !important;
        }

      #sidebar_ach ul div {
            display: block !important
      }

      .achievement space {
            display: none !important;
      }

      body .achievement_content {
            margin: .2rem 0 !important;
      }

      .center-table-achievement {
            width: 100% !important;
      }

      #sidebar_ach,
      #sidebar_ach ul {
            display: inline;
      }
}

/* end achievement */