.gate_trade_drawer_wrap{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  z-index: 101;
}
.gate_trade_drawer{
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 12;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
}
.trade_drawer_position {
  background: var(--color-bg-3);
  min-height: 100px;
  position: fixed;
  z-index: 13;
  bottom: -100%;
  left: 0;
  width: 100%;
  font-size: 12px;
  padding-top: 8px;
  padding-bottom: 42px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: 8px 8px 0 0;
}
.right{
  bottom: 0;
  right: -100%;
  left: unset;
}
.drawer_content{
  overflow: scroll;
  padding: 0 16px;
  box-sizing: border-box;
  flex:1;
  padding-bottom: 10px;
  font-size: 14px;
  max-height: 80vh;
}
.margin_tip_wrap_content .drawer_close{
  color: #fff;
}
.drawer_close{
  z-index: 100;
  position: absolute;
  right: 16px;
  top:16px;
  color: var(--color-neutral-1);
}
.drawer_title{
  color: var(--color-text-1);
  font-size: 16px;
  line-height: 52px;
  font-weight: 600;
  padding: 0 16px;
  box-sizing: border-box;
  height: 52px;
}
.center_modal_wrap .trade_modal_header_no{
  height: 0;
}
.center_modal_wrap{
  padding: 16px!important;
}
.center_modal_wrap .double_button button:nth-of-type(1){
  color: var(--color-brand-1);
  border: 1px solid var(--color-brand-1);
  background: transparent;
}
.trade_modal_center_content{
  padding-right: 16px;
}
.gate_trade_drawer_wrap .double_button, .center_modal_wrap .double_button{
  display: grid;
  grid-template-columns:1fr 1fr;
  grid-column-gap: 8px;
}
.double_button  button:nth-of-type(2){
  background: var(--color-brand-1);
}
.drawer_button .mantine-Button-root{
  height: 40px;
}
.mantine-Modal-root input:focus ,.mantine-Modal-root button:focus{
  outline: none;
}
.drawer_button{
  padding: 0 16px;
  box-sizing: border-box;
}
.center_modal_button{
  margin-top: 16px;
}
.trade_modal_header{
  height: 30px;
  margin-bottom: 8px;
  line-height: 30px;
}
 .mantine-Button-label{
  font-size: 16px;
  font-weight: 600;
}
.order_grid_common .mantine-Button-label{
  font-weight: normal;
}
.bottom_drawer{
  animation: bottom_drawer 0.3s forwards  ease-in;
}

.right_drawer{
  top:0;
  width: 80%;
  height: 100vh;
  box-shadow: 0px 4px 24px rgba(4, 9, 25, 0.08);
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: unset;
  right:-100%;
  animation: right_drawer 0.3s forwards ease-in;
}

.position_draw_mask{
  animation: bottom_draw_mask 0.3s forwards  ease-in;
  background: transparent;
}
.position_draw_mask{
  animation: position_draw_mask 0.3s forwards  ease-in;
  background: transparent;
  top:0;
  right:0;
  left: unset;
}
.bottom_drawer .trade_drawer_position{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.right_back{
  animation: right_back 0.3s forwards ease-out;
}
.gate_trade_drawer_wrap .bottom_back{
  animation:bottom_back 0.3s forwards ease-out ;
}
.first_tip_content .second_tip_list{
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 8px;
}
@keyframes bottom_back {
  0%{
    bottom: 0;
  }
  100%{
    bottom: -100%;
  }
}
@keyframes right_back {
  0%{
    right: 0;
  }
  100%{
    right:-100%;
  }
}

@keyframes bottom_drawer {
  0%{
    bottom: -100%;
  }
  100%{
    bottom: 0
  }
}

@keyframes position_draw_mask {
    0%{
      background: rgba(0,0,0,0);
    }
    100%{
      background: rgba(0,0,0,0.8);
    }
}

@keyframes right_drawer {
  0%{
    right:-100%;
  }
  100%{
    right: 0
  }
}
.double_button button:nth-of-type(2)[data-disabled]{
  background-color: var(--color-neutral-2);
  color: var(--color-text-4);
}
.carousel .update_tradeable .icon_warning{
  color: var(--color-other-2);
  width: 16px;
  height: 16px;
}
.carousel {
  width: 100%;
  height: 80vh;
  overflow: hidden;
  position: relative;
}
.spot_setting_icon{
  position: relative;
}
.tips_a{
  color: var(--color-brand-1);
}
.spot_setting_icon .margin_tip_wrap{
  position: absolute;
  right: 8px;
  top: 10px;
}
.margin_tip_wrap .mantine-Popover-arrow{
  left: unset!important;
  right: 20px!important;
}
.pre_wrap_tooltip div,.pre_wrap_tooltip {
  white-space: normal;
}
.iceberg_tooltip_a {color: var(--color-brand-1);}
.margin_tip_wrap_content{
  display: flex;
  flex-direction: row;
}
.margin_tip_wrap_content div{
  margin-right: 18px;
  line-height: 150%;
}
.spot_setting_icon  .drawer_close{
  color:#fff;
  top:12px;
  right: 12px;
}
.spot_setting_icon .mantine-Popover-dropdown {
  background: var(--color-brand-1);
}
.current_mode_title .mantine-Button-root{
  background-color: inherit!important;

}
.current_mode_title .mantine-Button-label{
  color: var(--color-text-3);
  font-size: 14px;
}
.carousel_wrap{
  flex-direction: row;
  display: flex;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
  position: absolute;
}
.color_setting_spot {
  border-top: none;
  margin-top: 0;
}
body .drawer_content::-webkit-scrollbar{
  width: 0px;
}
body .drawer_content::-webkit-scrollbar{
  width: 2px;
}
.carousel .carousel_wrap_transition {
  transition: transform 0.3s linear;
}
.carousel_wrap_item{
  flex: 0  0 286px;
  background: var(--color-card-1);
  box-sizing: border-box;
  margin-right: 12px;
  border-radius: 4px;
  height: 80vh;
  display: flex;
}
.update_info_content{
  flex:1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 16px;
}
.update_info_content::-webkit-scrollbar{
  width: 4px;
}
.swiper_dot div{
  height: 8px;
  width: 8px;
  background: var(--color-neutral-3);
}
.swiper_dot .active{
  background: var(--color-brand-1);
}
.swiper_dot{
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 22px;
}
.spot_setting_upgrade .drawer_content{
  padding: 0;
  max-height: 90vh!important;
}
.swiper_dot div:nth-of-type(2){
  margin: 0 12px;
}
.update_button{
  padding:16px;
}
.spot_setting_upgrade .right_drawer{
  width: 350px;
}
.spot_set_header{
  height: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30px;
  color: var(--color-text-1);
  font-size: 16px;
}
.spot_set_header svg{
  color: var(--color-text-3);
  margin-right: 4px;
}
.update_info_wrap{
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}
.update_info_title{
  padding: 16px;
  border-bottom: 1px solid var(--color-divider-2);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.update_info_title span:nth-of-type(1){
  font-size: 16px;
  color: var(--color-text-1);
}
.update_info_title span:nth-of-type(2){
  font-size: 12px;
  color: var(--color-text-3);
  margin-top: 8px;
}
.update_area_title{
  font-size: 14px;
  color: var(--color-text-3);
  margin-top: 16px;
  margin-bottom: 12px;
}
.update_tradeable div span{
  color: var(--color-text-1);
  font-size: 12px;
}
.update_tradeable .flex-row-bt{
  margin-bottom: 12px;
}
.update_tradeable div .disabled{
  color: var(--color-text-2);
}
.update_tradeable div svg{
  margin-right: 4px;
}
.update_tradeable div .info_icon_tips{
  margin-left: 4px;
}
.update_tradeable .switch_item{
  margin-top: 0;
}
.spot_setting_open{
  font-size: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  line-height: 16px;
}
.spot_setting_open svg{
  width: 14px;
  height: 14px;
  margin-left: 2px;
  color: var(--color-text-3);
}
html[lang=ar] .margin-isolated-popup{
  padding: 0;
}
.update_risk_info svg{
  margin-right: 4px;
}
.update_risk_info {
  display: flex;
  flex-direction: row;
}
.update_risk_info  span{
  font-size: 12px;
  color: var(--color-text-1);
  line-height: 150%;
}
.update_button  .mantine-Button-root{
  height: 32px;
}
.carousel_wrap .active{
  border: 1px solid var(--color-brand-1);
  border-radius: 4px;
}
.update_tradeable .coming_soon_margin{
  margin-bottom: 0;
  padding: 4px 10px;
  color: var(--color-funct-4);
  margin-left: 2px;
  font-size: 10px;
  background-color: rgba(255,134,13,0.1);
  border-radius: 2px;
  line-height: 12px;
}
.settings-drawer .trade_drawer_position{
  padding-bottom: 0px!important;
}
.settings-drawer .drawer_content{
  max-height: 100vh;
}
.account_title_mode div{
  position: relative;
}
.show_tip_margin{
  position: relative;
}
.coin_info_header .show_tip_margin::after{
  right: -6px;
  top:-3px;
}
.show_tip_margin::after{
  content: '';
  position: absolute;
  right: -8px;
  top:0;
  height: 6px;
  width: 6px;
  background: var(--color-other-3);
  border-radius: 50%;
}
.spot_got_tips{
  align-items: flex-start;
  background: #fff;
  padding: 4px 8px;
  color: var(--color-brand-1);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  margin-top: 8px;
}
.margin_tip_wrap .mantine-Popover-dropdown{
  z-index: 5!important;
}
.switch_margin_mode_fail .modal_content p{
  margin: 20px 0;
  font-size: 14px;
}
.switch_margin_mode_fail .modal_content p:nth-of-type(1){
  color: var(--color-text-1);
}
.switch_margin_mode_fail .modal_content p:nth-of-type(2){
  color: var(--color-text-2);
}
.switch_margin_mode_fail .margin_fail_tip button{
  width: 100%;
  height: 42px;
}
 .trade_modal_title{
  font-size: 16px;
  color: var(--color-text-1);
  font-weight: 600;
}
.classic-dark .switch_margin_mode_fail{
  background-color: var(--color-bg-1);
}
.spot_margin_tip .carousel_wrap_item{
  flex: 0 0 100%;
  margin-right: 0;
  height: calc(80vh - 230px);
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
}
.spot_margin_tip .carousel_wrap{
  padding: 0;
}

.spot_margin_tip  .carousel{
  height: calc(80vh - 230px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.spot_margin_tip .update_info_content{
  overflow: unset;
  flex: unset;
}
.first_tip_content ul{
  padding-left: 20px;
}
.first_tip_content ul li{
  color: var(--color-text-3);
  font-size: 12px;
  line-height: 18px;
  list-style-type: disc;
  margin-bottom: 8px;
}
.first_tip_content h4{
  position: relative;
  font-weight: 600;
  color: var(--color-text-1);
  font-size: 14px;
  padding-left: 16px;
  margin-bottom: 8px;
}
.first_tip_content h4::after{
  content:'';
  position: absolute;
  height: 8px;
  width: 8px;
  background: var(--color-funct-1);
  left: 0;
  top:calc(50% - 4px)
}
.first_tip_content{
  margin-bottom: 16px;
}
.warning_tips{
  color: var(--color-text-2);
  font-size: 12px;
  margin-bottom: 16px;
  line-height: 150%;
}
.mantine-Modal-modal{
  background-color: var(--color-bg-1);
}
.remind-row .gate_checkbox_wrap{
  align-items: flex-start;
}
.remind-row .mantine-Checkbox-root{
  margin-top: 2px;
}
.flex{
  display: flex;
}
.flex-row-center-bt{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flex-row-center-center{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flex-column-end{
  display: flex;
  flex-direction: row;
  justify-content: end;
}
.flex-row-bt{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex-row-center{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.trade_modal_center_content .trade_ring_progress{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.trade_ring_progress .mantine-RingProgress-root {
  animation: ring_progress 1.5s infinite;
}
@keyframes ring_progress {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}
.icon_mistake{
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.trade_modal_center_content .icon_mistake svg{
  height: 52px;
  width: 52px;
  color: var(--color-funct-3);
}
.loading-page-wrapper {
  position: relative;
  height: 100%;
  font-size: 0;
}

.loading-page-wrapper-bounce {
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 45%;
}

.sk-wave {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.sk-wave-rect {
  background-color: var(--brandColor);
  height: 100%;
  width: 10%;
  animation: sk-wave 1.2s infinite ease-in-out;
}

.sk-wave-rect:nth-child(1) { animation-delay: -1.2s; }
.sk-wave-rect:nth-child(2) { animation-delay: -1.1s; }
.sk-wave-rect:nth-child(3) { animation-delay: -1.0s; }
.sk-wave-rect:nth-child(4) { animation-delay: -0.9s; }
.sk-wave-rect:nth-child(5) { animation-delay: -0.8s; }

@keyframes sk-wave {
  0%, 40%, 100% {
      transform: scaleY(0.4);
  } 20% {
        transform: scaleY(1);
    }
}

.progress_loading{
  padding: 22px 0;
}
.TradeUserGuidePopup-wrapper{
  width: 100%;
  height: 100%;
}
.TradeUserGuidePopup-wrapper .video-body,
.TradeUserGuidePopup-wrapper .video-play{
  width: 100%;
  height: 100%;
  position: relative;
}
.TradeUserGuidePopup-wrapper .video-play .video-pause-wapper{
  width: 100%;
  height: 100%;
  background: #04091A;
  opacity: 0.48;
  border-radius: 16px;
  position: absolute;
  z-index: 2;
}
.TradeUserGuidePopup-wrapper .video-play .video-loading,
.TradeUserGuidePopup-wrapper .video-play .video-pause{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
}
.TradeUserGuidePopup-wrapper .video-play .video-loading::after{
  content: ' ';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 49px;
  height: 49px;
  background-color: transparent;
  border: 2px solid var(--colorFont4);
  z-index: 1;
  border-radius: 50%;
}
.TradeUserGuidePopup-wrapper .video-play .video-loading::before{
  content: ' ';
  position: absolute;
  /* left: 50%;
  top: 50%;
  transform: translate(-50%,-50%); */
  width: 49px;
  height: 49px;
  background-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-color: transparent var(--brandColor) var(--brandColor) var(--brandColor);
  z-index: 2;
  border-radius: 50%;
  animation: rotate 1.5s infinite linear;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.TradeUserGuidePopup-wrapper .video-play .video-pause::after{
  width: 24px;
  height: 24px;
  content: ' ';
  background: url(/images/pro_future/play.svg) no-repeat;
  background-size: contain;
}
.TradeUserGuidePopup-wrapper .video-body .close-size{
  width: 14px;
  height: 14px;
}
.TradeUserGuidePopup-wrapper .video-play video{
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.TradeUserGuidePopup-wrapper .video-play.video-screen{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 51px;
  left: 0;
  padding: 0 24px;
  width: calc(100% - 48px);
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel .video-control-flex{
  display: flex;
  align-items: center;
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel .video-control-flex .video-control-play{
  width: 16px;
  height: 16px;
  margin-right: 14px;
  background: url(/images/pro_future/play-little.svg) no-repeat;
  background-size: contain;
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel .video-control-flex .video-control-pause{
  background: url(/images/pro_future/stop-little.svg) no-repeat;
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel .video-control-flex .video-control-txt{
  font-size: 16px;
  color: var(--colorWhite);
  font-weight: 600;
}
.TradeUserGuidePopup-wrapper .video-play .video-conrol-panel .video-control-screen{
  width: 14px;
  height: 14px;
  background: url(/images/pro_future/screen.svg) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.TradeUserGuidePopup-wrapper .video-play .video-control-progress{
  position: absolute;
  bottom: 24px;
  left: 0;
  padding: 0 24px;
  width: calc(100% - 48px);
}
.TradeUserGuidePopup-wrapper .video-play .video-control-progress .line{
  height: 4px;
  background: var(--color-bg-3);
  mix-blend-mode: normal;
  opacity: 0.5;
  border-radius: 16px;
  width: 100%;
  position: relative;
  cursor: pointer;
}
.TradeUserGuidePopup-wrapper .video-play .video-control-progress .line .line-perc{
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background-color: var(--brandGreen);
}
.trade_margin_video_content img{
  width: 100%;
}