:root {
  --warn-message-color: #ffffff;
  --tile-color: #000000;
  --sure-password-bg: #FFFCF3;
  --sure-time-bg: #BCBDC0;
  --product-tag-color: #13BF86;
  --product-tag-bg: #E9FFE6;
  --tip-but-color: #04091A
}




:root .classic-dark {
  --warn-message-color: #ffffff;
  --tile-color: #ffffff;
  --sure-password-bg: #282724;
  --product-tag-color: rgb(11, 186, 128);
  --product-tag-bg: rgb(20, 42, 39);
  --sure-time-bg: #989FB3;
  --tip-but-color:#3366FF
}

.remaining {
  color: var(--color-text-4);
  margin-right: 4rem
}

.position_percent {
  color: var(--color-text-2);
  font-style: normal;
  font-weight: 400;
  font-size: 14rem;
  line-height: 14rem;
}

.explain {
  color: #FFC20D;

}

.hodl_slot_auction_detail {
  font: 500 16rem 'Gate_Sans Medium';
  color: var(--color-text-5);
  background-color: var(--color-bg-3);
}

.slot_auction_banner {
  background: url(/images/slot_auction/loan_light.png) no-repeat;
  background-size: cover;
  backdrop-filter: blur(80rem);
  margin-top: -74rem;
  margin-bottom: 140rem;
}

.slot_banner_main {
  margin-top: 128rem;

}

.slot_auction_detail_title {
  font-style: normal;
  font-weight: 600;
  font-size: 16rem;
  line-height: 16rem;
  margin-bottom: 56rem;
  color: var(--color-text-4);
}

.slot_auction_detail_title a {
  font-style: normal;
  font-weight: 600;
  font-size: 16rem;
  line-height: 16rem;
  color: var(--color-text-4);
}

.slot_product_detail {
  color: var(--color-text-1);
}

.direction {
  color: var(--color-text-4);
}

.slot_slot_product_detail {
  margin: auto 4rem;
  color: var(--color-text-1) !important;
}

.slot_simple-progress {
  margin-bottom: 8rem;
  width: 100%;
  position: relative;
  height: 8rem;
  border-radius: 15rem;
  overflow: hidden;
}

.slot_simple-progress-bg {
  height: 8rem;
  border-radius: 15rem;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-divider-2);
  width: 100%;
}

.slot_simple-progress-slider {
  height: 8rem;
  border-radius: 15rem;
  position: absolute;
  top: 0;
  left: 0;
}

.slot_simple-progress-slider-active {
  background-color: #11AD7A;
}


/* header */

.slot_detail_content {
  background: var(--color-bg-4);
  box-shadow: 0rem 4rem 40rem rgb(23 56 153 / 12%);
  border-radius: 16rem;
  padding: 40rem;
  display: grid;
  margin-bottom: 140rem;
  grid-template-columns: 1fr 4fr;
  position: relative;
  overflow: hidden;
}

.slot_auction_detail_main_left {
  /* overflow: hidden; */
  position: relative;
}

.content_img {
  width: 320rem;
  min-height: 320rem;
  object-fit: contain;
  height: 320rem;
  border-radius: 10rem;
}

.tips-popup-risk {
  display: flex;
}

.circle {
  width: 9rem !important;
  height: 6rem !important;
}

.tips-popup-content-dot {
  display: flex;
  align-items: baseline;
  margin-top: 7px;
}


.slot_auction_detail_main_right {
  flex: 1 1 auto;
  margin-left: 40rem;
}

.ar_right {
  margin-right: 40rem;
  margin-left: 0rem;
}

.slot_product_header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20rem;
  margin-top: -10rem;
}

.zh-title {
  margin-bottom: 32rem !important;
}
.zh-simple {
  margin-bottom: 40rem !important;
}

.slot_product_header .product_tag {
  color: var(--product-tag-color);
  background: var(--product-tag-bg);
  border-radius: 30.9473rem;
  padding: 8rem 10rem;
  flex: none;
  order: 1;
  flex-grow: 0;
  font-size: 14rem;
  font-weight: 500;
  margin-top: 2px;
}

.slot_product_header .product_name {
  padding-right: 16rem;
  font-style: normal;
  font-weight: 600;
  font-size: 28rem;
  line-height: 150%;
  color: var(--tile-color);
  max-width: 750rem;
}

.finance-info-bg {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80rem 80rem 0;
  border-color: transparent #956AF9 transparent transparent;
  right: 0;
  z-index: 1;
  border-top-right-radius: 16rem;
  border: 50rem solid #956AF9;
  border-left: 50rem solid transparent;
  border-bottom: 50rem solid transparent;
  top: 0;
  position: absolute;
  width: 0;
  right: -1rem;

}

.slot_detail_info_badge {
  transform: rotate(45deg);
  font-size: 12rem;
  color: var(--warn-message-color);
  position: absolute;
  z-index: 1;
  right: 0;
  top: 27rem;
  overflow: hidden;
  text-align: center;
  width: 64rem
}

.slot_product_detailed {
  margin-bottom: 32rem;
  display: flex;
  padding-right: 13rem;
  justify-content: space-between;
  align-items: flex-end;
}

.slot_product_detailed_main {
  text-align: center
}

.slot_product_detailed_main .product_detailed_text {
  font-style: normal;
  font-weight: 600;
  font-size: 28rem;
  line-height: 28rem;
  color: var(--color-text-1);
  margin-bottom: 16rem;
}

.slot_product_detailed_main .product_detailed_value {
  font-style: normal;
  font-weight: 400;
  font-size: 16rem;
  line-height: 16rem;
  color: var(--color-text-3);
}

.slot_detail_countdown_number {
  display: inline-block;
}

.slot_detail_countdown_rect {
  width: fit-content;

}

.slot_product_detailed_simple {
  margin-top: 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8rem;
  margin-bottom: 20rem;
}

.position_total {
  font-style: normal;
  font-weight: 400;
  font-size: 14rem;
  line-height: 14rem;
  color: var(--color-text-4);
}

.position_part {
  font-style: normal;
  font-weight: 400;
  font-size: 14rem;
  line-height: 14rem;
  color: var(--color-text-2);
}

.sold_out {
  position: absolute;
  right: -152rem;
  top: 27rem;
  transform: rotate(44.59deg);
  width: 400rem;
  height: 31rem;
  display: flex;
  flex-direction: column-reverse;
  font-size: 18rem;
  font-weight: 500;
  color: var(--warn-message-color);
  line-height: 25rem;
  padding-bottom: 6rem;
  text-align: center;
  background-color: var(--color-text-2)
}

.ar_sold {
  left: -152rem;
  transform: rotate(144deg);
  right: inherit;
}

.product_details {
  margin-bottom: 140rem;
}

/* product_details */
.slot_product_details .product_details_name {
  font-style: normal;
  font-weight: 600;
  font-size: 40rem;
  color: var(--color-text-1);
  line-height: 40rem;
  margin-bottom: 48rem;
}

.slot_product_details .product_finances_details {
  background: var(--color-bg-1);
  border-radius: 16rem;
  padding: 40rem 63rem 40rem 40rem;
}

.slot_product_details .product_detailed_introduce {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slot_detail_intro_text {
  font-style: normal;
  font-weight: 400;
  font-size: 16rem;
  line-height: 14rem;
  color: var(--color-text-3);
  margin-bottom: 24rem;
  text-align: left;
}

/* slot_project */
.slot_project_introduction {
  padding-bottom: 140rem;
}

.slot_project_introduction_name {
  font-style: normal;
  font-weight: 600;
  font-size: 40rem;
  line-height: 40rem;
  color: var(--color-text-1);
  margin-bottom: 48rem;
}

.slot_detail_intro_value {
  font-style: normal;
  font-weight: 600;
  font-size: 16rem;
  line-height: 14rem;
  color: var(--color-text-2);
  /*  */
}

.slot_detail_desc {
  font-style: normal;
  font-weight: 400;
  font-size: 20rem;
  line-height: 180%;
  color: #04091A;
}

.slot_product_footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 40rem;
  /* margin-right: 9.88rem; */
}

.slot_product_footer_left {
  background: var(--color-bg-1);
  border-radius: 8rem;
  padding: 24rem 23rem 24rem 24rem;
  height: 40rem;
}

.lock_rules {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-gap: 42rem;
}

.bottom_rules {
  margin-top: 16rem;
}

.slot_lock_detail_value {
  text-align: right;
  color: var(--color-text-2);
  font-style: normal;
  font-weight: 400;
  font-size: 12rem;
  line-height: 12rem;
}

.slot_lock_detail_text {
  font-style: normal;
  font-weight: 400;
  font-size: 12rem;
  line-height: 12rem;
  color: var(--color-text-3);
}

.slot_product_footer_right .available {
  font-style: normal;
  font-weight: 400;
  font-size: 14.6829rem;
  line-height: 15rem;
  margin-right: 16.78rem;
  color: var(--color-text-2);
}

.slot_product_footer_right .buy_coin {
  font-style: normal;
  font-weight: 600;
  font-size: 14.6829rem;
  line-height: 15rem;
  color: var(--color-brand-1);
  cursor: pointer;
}

.warning_message_text {
  margin-left: 16rem;
}

.warning_message {
  box-sizing: border-box;
  margin: 0;
  padding: 16rem 24rem;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: 'tnum';
  position: fixed;
  top: 10%;
  left: 42%;
  z-index: 1010;
  pointer-events: none;
  background: var(--warn-message-color);
  box-shadow: 0rem 4rem 16rem rgba(23, 56, 153, 0.06);
  border-radius: 8rem;
}
.info_badge_zh {
  top: 17rem !important
}
.buy_coin_number {
  margin-top: 10rem;
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: baseline;
  grid-gap: 16rem;
 align-items: center;
  /* border: 1px solid #E6E9F2; */
}

.acknowledge_modal_num {
  font-style: normal;
  font-weight: 400;
  font-size: 16rem;
  line-height: 16rem;
  color: var(--color-funct-2);
}

.finish {
  background: #E6E9F2 !important;
  border-radius: 8rem;
  cursor: not-allowed !important;
  /* color: var(--color-text-4) !important; */
  background: var(--color-neutral-2);
  color: var(--color-text-1);
}

.being-status {
  /* background-color: #EEF1FA;
  color: #04091A; */
  background: var(--color-neutral-2);
  color: var(--color-text-1);
}

.btn-primary {
  color: var(--warn-message-color);
  background: var(--color-brand-1);
}
.btn-primary:hover {
  color: #ffffff;
  background-color: #1b41b2;
}

.buy_coin_number_btn {
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  padding: 16.77rem 28rem;
  border-radius: 8rem;
  cursor: pointer;
  text-align: center;

}




.fund-password-order {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  padding: 0 1.4rem;
}


/* .being-status:hover {
  background: #1B41B2;
  color: #FFFFFF;
} */

.fund-password-order-main {
  background-color: var(--color-card-2);
  border-radius: 0.2133rem;
  justify-content: space-between;
  align-items: end;
  position: absolute;
  top: 30%;
  width: 500rem;
  left: 35%;
  border-radius: 16rem;
  padding: 24rem 24rem 24rem 40rem;
}

.fund-password-popup-sure {
  margin-top: 32rem;
}

.fund-password-popup-sure-title {
  font-style: normal;
  font-weight: 400;
  font-size: 12rem;
  line-height: 12rem;
  color: var(--color-text-3);
  margin-bottom: 8rem;
}

.fund-password-popup-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

.message_error {
  color: #CC3D3D;
}

.fund-password-popup-sure-message {
  margin-top: 20rem;
  background: var(--sure-password-bg);
  border-radius: 4rem;
  padding: 8rem 36rem 8rem 13.5rem
}

.fund-password-popup-sure-time {
  margin-left: 9.5rem;
  font-style: normal;
  font-weight: 400;
  font-size: 12rem;
  line-height: 150%;
  color: var(--sure-time-bg)
}

.fund-password-popup-footer {
  margin-top: 44rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 24rem;
}


.fund-password-popup-footer-left {
  padding: 16rem 50rem;
  background: var(--color-neutral-2);
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  color: var(--color-text-1);
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fund_password {
  cursor: pointer;
}

.fund-password-popup-footer-right {
  padding: 16rem 50rem;
  background: var(--color-brand-1);
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  text-align: center;
  color: var(--warn-message-color);
  cursor: pointer;
  margin-right: 16rem;
}

.acknowledge_order {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  padding: 0 1.4rem;
}

.acknowledge-order-main {
  background-color: var(--color-card-2);
  border-radius: 0.2133rem;
  justify-content: space-between;
  align-items: end;
  position: absolute;
  top: 30%;
  width: 500rem;
  left: 35%;
  border-radius: 16rem;
  padding: 24rem 24rem 40rem 40rem;
}

.acknowledge-popup-content-title {
  font-style: normal;
  font-weight: 600;
  font-size: 24rem;
  line-height: 36rem;
  color: var(--color-text-1);
  margin-top: 16rem;
}

.acknowledge-modal-info {
  margin-top: 32rem;
  color: var(--color-text-3);
  font-style: normal;
  font-weight: 400;
  font-size: 16rem;
  line-height: 16rem;
}

.acknowledge-popup-footer {
  margin-top: 48rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24rem;
}

.acknowledge-popup-footer-left {
  padding: 16rem 50rem;
  background: var(--color-neutral-2);
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  color: var(--color-text-1);
  text-align: center;
  cursor: pointer;

}

.acknowledge-popup-footer-right {
  padding: 16rem 50rem;
  background: var(--color-brand-1);
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  text-align: center;
  color: var(--warn-message-color);
  cursor: pointer;

}

.tips-popup-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  padding: 0 1.4rem;
}

.modal-contain-ul {
  list-style-type: disc;
}

.tips-popup-main {
  background-color: var(--color-card-2);
  border-radius: 0.2133rem;
  justify-content: space-between;
  align-items: end;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 23%;
  width: 820rem;
  border-radius: 16rem;
  padding: 32rem 40rem 32rem 40rem;
}

.success-tips-popup-main {
  background-color: var(--color-card-2);
  border-radius: 0.2133rem;
  /* display: flex; */
  justify-content: space-between;
  align-items: end;
  position: absolute;
  top: 20%;
  width: 820rem;
  left: 26%;
  padding: 24rem 24rem 40rem 40rem;
  border-radius: 16rem;
}

.success-tips-popup-content-title {
  font-style: normal;
  font-weight: 600;
  font-size: 24rem;
  line-height: 150%;
  color: var(--color-text-1);
  margin-bottom: 20rem;
  text-align: right;
  cursor: pointer;
}

.success-details {
  font-style: normal;
  font-weight: 400;
  font-size: 24rem;
  line-height: 24rem;
  color: #B8BDCC;
  text-align: center;
  margin-bottom: 16rem;
}

.purchase {
  margin-top: 54rem;
  font-style: normal;
  font-weight: 600;
  font-size: 32rem;
  line-height: 32rem;
  color: var(--color-text-1);
  margin-bottom: 12rem;
  text-align: center;
}

.success_img {
  width: 620rem;
  height: 260rem;
  margin: 0 auto;
  display: inherit;
}

.tips-popup-content-title {
  font-style: normal;
  font-weight: 600;
  font-size: 24rem;
  line-height: 150%;
  color: var(--color-text-1);
  margin-bottom: 20rem;
}

.tips-popup-content-text {
  display: flex;
  margin-bottom: 16rem;
  align-items: flex-start
}

.tips-popup-content-dot::before {
  content: '';
  position: absolute;
  left: 5%;

  border: 1px solid var(--color-text-3);

  background-color: var(--color-text-3);

  display: inline-block;
  width: 3px;
  height: 3px;

  border-radius: 50%;

  margin-right: 12px;
}

.tips-popup-content-logan {
  font-style: normal;
  font-weight: 400;
  font-size: 16rem;
  line-height: 150%;
  margin-left: 20rem;
  color: var(--color-text-3);
}

.tips-popup-footer {
  margin-top: 40rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24rem;
}

.tips-popup-footer-left {
  padding: 16rem 50rem;
  background: #EEF1FA;
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  color: #04091A;
  text-align: center;
  cursor: pointer;

}
.success-tips-popup-footer-left {
  padding: 16rem 50rem;
  background: #EEF1FA;
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  color: var(--tip-but-color);
  text-align: center;
  cursor: pointer;

}

.modal-password {
  font-size: 16rem;
  cursor: pointer;
  color: #B8BDCC;
}

.modal-password-close {
  font-size: 16rem;
  cursor: pointer;
  color: #B8BDCC;
  margin-top: -36rem;
}

.tips-popup-footer-right {
  padding: 16rem 50rem;
  background: var(--color-brand-1);
  border-radius: 8rem;
  font-style: normal;
  font-weight: 600;
  font-size: 20rem;
  line-height: 20rem;
  text-align: center;
  color: var(--warn-message-color);
  cursor: pointer;
}


.classic-dark .slot_auction_banner {
  background: url(/images/slot_auction/loan_dark.png) no-repeat;
  background-size: cover
}

.classic-dark .fund-password-popup-sure input {
  background: #292F40
}

/* .classic-dark .buy_coin_number input {
  border: 1px solid #292F40;
} */

.classic-dark .tips-popup-wrapper,
.classic-dark .acknowledge_order,
.classic-dark .fund-password-order {
  background: rgba(0, 0, 0, 0.85)
}

.classic-dark .slot_detail_desc {
  color: #ffffff;
}

.classic-dark .slot_product_details {
  color: #ffffff;
  /* background-color: #151926; */
}
.classic-dark .success-tips-popup-footer-left {
  background: transparent;
  border: 1px solid
}

.classic-dark input {
  background: #151926;
  border: 1px solid #292F40;
}

.classic-dark .warning_message {
  background: #332B14;
  border: 1rem solid rgba(255, 194, 13, 0.6);
  box-shadow: 0rem 4rem 16px rgba(23, 56, 153, 0.06);
  border-radius: 8rem;
  color: #ffffff;
}