/* CoinASX Trade Kline V54 */

.cx54-kline-host{
  width:100%;
  height:220px;
  background:#0b0b0c;
  position:relative;
  overflow:hidden;
  border-top:1px solid #1f2024;
  border-bottom:1px solid #1f2024;
  box-sizing:border-box;
}

.cx54-toolbar{
  height:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  box-sizing:border-box;
  border-bottom:1px solid #202124;
  background:#0b0b0c;
}

.cx54-periods{
  display:flex;
  align-items:center;
  gap:12px;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
}
.cx54-periods::-webkit-scrollbar{display:none}

.cx54-period{
  border:0;
  background:transparent;
  color:#9aa0aa;
  font-size:11px;
  height:32px;
  padding:0;
  position:relative;
}

.cx54-period.active{
  color:#fff;
  font-weight:700;
}
.cx54-period.active:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:14px;
  height:2px;
  background:#2f6bff;
  border-radius:2px;
  transform:translateX(-50%);
}

.cx54-symbol{
  color:#9aa0aa;
  font-size:10px;
  flex-shrink:0;
}

.cx54-chart-wrap{
  position:absolute;
  left:0;
  right:0;
  top:32px;
  bottom:0;
}

.cx54-canvas{
  display:block;
  width:100%;
  height:100%;
}

.cx54-ohlc{
  position:absolute;
  left:8px;
  top:5px;
  z-index:2;
  display:flex;
  gap:7px;
  font-size:9px;
  color:#9aa0aa;
  pointer-events:none;
}

.cx54-price-tag{
  position:absolute;
  right:0;
  z-index:3;
  transform:translateY(-50%);
  color:#fff;
  font-size:9px;
  line-height:16px;
  padding:0 5px;
  border-radius:3px 0 0 3px;
  pointer-events:none;
}

.cx54-source{
  position:absolute;
  left:8px;
  bottom:4px;
  z-index:2;
  color:#707784;
  font-size:8px;
  pointer-events:none;
}

/* K线下面紧接现货下单区 */
.cx54-kline-host + .trade-buy-sell{
  margin-top:0!important;
}

/* 不影响盘口和V53 */
.trade-buy-sell{
  position:relative;
  z-index:1;
}

@media(max-width:430px){
  .cx54-kline-host{
    height:205px;
  }
  .cx54-toolbar{
    height:30px;
    padding:0 8px;
  }
  .cx54-chart-wrap{
    top:30px;
  }
  .cx54-period{
    height:30px;
    font-size:10px;
  }
  .cx54-periods{
    gap:10px;
  }
}